webpack - webpack 4 - 生产模式 - UglifyJs 错误 - 意外字符'@'
问题描述
使用 运行 webpack 4 时mode: production
,出现以下错误:
ERROR in style.ba47861224d5cf44f61f.js from UglifyJs
Unexpected character '@' [./app/scss/main/app.scss:1,0][style.ba47861224d5cf44f61f.js:1,0]
这是我的配置:
common.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: {
index: "./webpack.entry.js",
style: "./app/scss/main/app.scss"
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
cacheDirectory: true
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new HtmlWebpackPlugin({
template: "./app/html/index.html"
})
],
output: {
path: path.resolve(__dirname, "dist")
}
};
webpack.dev.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const extractSass = new ExtractTextPlugin({
filename: "[name].[chunkhash].js"
});
module.exports = merge(common, {
devtool: "source-map",
module: {
rules: [
{
test: /\.scss$/,
use: extractSass.extract({
use: [
{
loader: "css-loader",
options: {
sourceMap: true,
url: false
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
})
}
]
},
plugins: [extractSass, new webpack.HashedModuleIdsPlugin()],
output: {
filename: "[name].[chunkhash].js"
},
mode: "production"
});
我不明白为什么 UglifyJs 抱怨特殊字符“@”。这样的字符不应该被删除css-loader
吗?
解决方案
我发现了问题!的filename
选项ExtractTextPlugin
有错误的扩展名js
。它应该是css
这样的:
const extractSass = new ExtractTextPlugin({
filename: "[name].[chunkhash].css"
});
推荐阅读
- intellij-idea - 在 IntelliJ Idea 社区调试 grails 3.3.11 项目
- google-data-studio - 限制在谷歌数据工作室中计算的行数
- javascript - 增加拼接指数的功能?
- javascript - 如何使用 java 脚本删除 django 动态表单集 - 索引问题?
- angular - 自定义指令更改输入中的数字格式并在 Angular 8 中使用计算中的数字
- flutter - 颤振从json中获取数据“字符串不是Iterable的子类型
" - mysql - SQL 根据第一个值两次从同一个表中获取不同的值
- javascript - 如何在 JavaScript 中对对象的所有值求平方?
- windows - Windows - 使用 CreateProcessWithTokenW 在会话 0 中创建一个进程
- javascript - 如何解决 Edge 和 Chrome 上的这些 html2canvas 滚动错误?