UglifyJs意外令牌：关键字«const»Webpack 4

Question

我正在开发ReactJs App，并在Webpack中使用UglifyJsPlugin来缩小js。但是，我尝试构建时出现提示错误。

ERROR in bundle.js from UglifyJs Unexpected token: keyword «const»

Webpack：4个 通天塔：7

"dependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
}

webpac.config.js

const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },

  optimization: {
    minimizer: [
      new UglifyJsPlugin(),
    ],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|es6)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env"]
       }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg||woff|woff2|eot|ttf)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, 
              disable: true, 
            }
          }
        ]
      },
    ]
  },
  node: {
    fs: 'empty',
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      filename: "./index.html"
    }),
    new Dotenv({ 
      safe: true, 
      systemvars: true, 
      silent: true, 
      defaults: false 
    }),
    new ExtractTextPlugin('style.css',{allChunks: false}),
    new webpack.optimize.OccurrenceOrderPlugin(true),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),

  ]
}

Answer 1

如果没有帮助，您可以尝试使用https://github.com/webpack-contrib/terser-webpack-plugin。

Answer 2

您应该解析一些node_modules

问题是您的某些node_modules具有const，还应该通过babel-loader对其进行解析。

有几种方法可以做到这一点。您可以阅读that thread，然后尝试对自己更有利的事情。

我喜欢这样的东西：

test: /\.(js|jsx|es6)$/,
exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,

这将忽略除node_modules和MY-MODULE模块之外的所有ANOTHER-ONE模块。结果，将解析最后两个。

Answer 3

尝试添加以下依赖项

$ npm install terser-webpack-plugin --save-dev

webpack.config.js

 const TerserPlugin = require('terser-webpack-plugin');
 module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

幸福的要求：)