Webpack 4生产模式下UglifyJs报错：意外字符'@'求助

这个问题我之前也碰到过，根源在于你把SCSS文件直接作为Webpack的入口点了——UglifyJs（Webpack4生产模式默认启用的压缩工具）只能处理JavaScript文件，它会把SCSS里的@（比如@import或者CSS变量的@）当成非法字符，所以才会抛出这个错误。

下面是具体的解决步骤：

• 移除SCSS的单独入口：不要把.scss文件作为独立的entry项，而是把它导入到你的JS入口文件中。比如在webpack.entry.js里添加一行：

  import './app/scss/main/app.scss';
  

  然后调整你的entry配置，删掉style入口：

  entry: {
    index: "./webpack.entry.js"
  },
  

• 确保样式loader配置正确：Webpack需要通过loader链来编译SCSS，你得在module.rules里配置好sass-loader、css-loader，生产环境建议用MiniCssExtractPlugin.loader代替style-loader来提取独立的CSS文件：

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV === 'production' ? require('mini-css-extract-plugin').loader : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
  

• 生产模式下提取CSS文件：如果需要把样式单独打包成CSS文件（避免内嵌到JS里），记得引入并配置MiniCssExtractPlugin：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    // ...其他配置
    plugins: [
      new MiniCssExtractPlugin({
        filename: 'style.[contenthash].css'
      }),
      new HtmlWebpackPlugin(...),
      new CleanWebpackPlugin(...)
    ]
  }
  

这样调整后，Webpack会正确编译SCSS为CSS，生产模式下将样式提取成单独的文件，UglifyJs只处理JavaScript代码，就不会再出现Unexpected character '@'的错误了。

内容的提问来源于stack exchange，提问作者Shawn