问题描述
我试图先运行webpack -p然后再运行npm run start来编译代码。
我的项目在终端上运行,但是我在{mini-css-extract-plugin} [内置] [失败]后收到错误消息
错误:
./ node_modules / bootstrap / dist / css / bootstrap.css中的错误(./node_modules/css-loader/dist/cjs.js!./node_modules/file-loader/dist /cjs.js??ref--6-0!./node_modules/extract-loader/lib/extractLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sas s-loader / dist / cjs.js!./ node_modules / bootstrap / dist / css / bootstrap.css) 模块构建失败(来自./node_modules/extract-loader/lib/extractLoader.js): SyntaxError:未知:意外令牌(7:0)
我看过类似的文章,并尝试了所有方法,但在使用webpack时,仍然出现此模块构建失败错误。有什么建议?这是我的webpack配置:
> const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
webpack = require('webpack');
module.exports = {
entry: ['babel-polyfill','./src/js/index.js'],output: {
path: path.resolve(__dirname,'dist'),publicPath: '/dist/',filename: 'bundle.js'
},devServer: {
contentBase: './dist'
},plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),new htmlWebpackPlugin({
filename: 'index.html',template: './src/index.html',minify: false
})
],module: {
rules: [
{
test: /\.css$/i,use: [MiniCssExtractPlugin.loader,'style-loader','css-loader'],},{
test: /\.js$/,exclude: /node_modules/,use:
{
loader: 'babel-loader'
}
},{
test: /\.(s*)css$/,use: [
{
loader: 'file-loader',options: {
name: '[name].css',outputPath: 'stylesheets/',esModule: false
}
},{
loader: 'extract-loader'
},{
loader: 'postcss-loader',options: {
plugins: function() {
return [
require('precss'),require('autoprefixer')
];
}
}
},{
loader: 'sass-loader'
}
]
}
]
}
};
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)