我在我的应用程序中使用 Webpack,其中我将入口点创建为
index.ts 并且我尝试使用 sass css bootstrap typescript 作为我的项目 webpack 中的资源来运行它,但我遇到了这些错误,(bootstrap-loader):
./node_modules/bootstrap-loader/no-op.js 中出现错误
(./node_modules/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader"," css-loader","sass-loader"],"styles":["mixins","标准化","打印","glyphicons","s
支架”,“类型”,“代码”,“网格”,“表格”,“表单”,“按钮”,“组件动画”,“下拉菜单”,“按钮组”,“输入组”,“导航”,“导航栏”,“面包屑”,“分页”,“寻呼机”,“标签”,“徽章”,“大屏幕”,“缩略图”,“警报”,“进度条”,“媒体”,“列表组”,“面板”,“井”,“响应式嵌入”,“关闭”,“模态”,“工具提示”,“弹出窗口”,“轮播”,“实用程序”,“响应式实用程序”], “脚本”:[“过渡”,“警报”,“按钮”,“轮播”,“折叠”,“下拉菜单”,“模态”,“工具提示”,“弹出窗口”,“滚动间谍”,“选项卡”,“ affix"],"configFilePath":"/projects/bootstrapwebpack/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/projects/bootstrapwebpack/node_modules/bootstrap-sass","bootstrapRelPath":" ../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
...
在我的 config.js 中,我有:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [ 'bootstrap-loader', './src/index.ts',],
module: {
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
},
},
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: /node_modules/
},
// Boooootstrap
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
},
{
test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000'
},
{
test: /\.(ttf|eot)$/, loader: 'file-loader'
},
],
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
目前我正在尝试在我的 package.json 中使用以下几行:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack --mode development --watch ",
"build": "webpack --progress -p --watch "
},
"dependencies": {
"autoprefixer": "^9.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.1.2",
"bootstrap-loader": "^3.0.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.0",
"exports-loader": "^0.7.0",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.3.1",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"popper.js": "^1.14.3",
"postcss-loader": "^2.1.6",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
}