UglifyJs 意外标记：关键字«const» Webpack 4答案

【问题标题】：UglifyJs Unexpected token: keyword «const» Webpack 4UglifyJs 意外标记：关键字«const» Webpack 4
【发布时间】：2019-08-23 07:19:52
【问题描述】：

我正在开发 ReactJs 应用程序并在 webpack 中使用 UglifyJsPlugin 来缩小 js。但是当我尝试构建时，提示以下错误。

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

网页包：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(),

  ]
}

【问题讨论】：

尝试删除 exclude: /node_modules/, 看看会发生什么。如果没有错误，则意味着您的 node_modules 库之一具有 const 并且它也应该通过 bable-loader 进行解析
@Arseniy-II 谢谢。删除node_modules后，它的构建没有错误。但是如何通过babel-loader解析它？
我已经为你添加了答案:)

标签： javascript reactjs webpack babeljs

【解决方案1】：

你应该解析你的一些`node_modules`

问题是你的一些node_modules 有const，它们也应该通过babel-loader 解析。

有几种方法可以做到这一点。您可以阅读that thread 并尝试更适合您的方法。

我更喜欢这样的：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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()],
  },
};

编码愉快 :)

【讨论】：

你应该解析你的一些node_modules

你应该解析你的一些`node_modules`