Webpack 4.1.1和UglifyJS2 -生产模式错误抛出错误的代码

Question

我已经将一个项目升级到Webpack 4.1.1，并且遇到了一个UglifyJS的错误，我似乎找不到它。

最小可重现性回购：https://github.com/jamesopti/uglifyjs-webpack-issue

虽然我认为这是一个bug，但我想尝试配置UglifyJS来解决它。到目前为止还没有运气，尽管有以下选项。

uglifyOptions: {
  mangle: false,
  keep_classnames: true,
  keep_fnames: true,
},

有什么想法吗？

Main.js代码：

import React from 'react';

import { render } from 'react-dom';
import ReactCodeMirror from 'react-codemirror';

// Enables syntax highlighting for javascript
require('codemirror/mode/javascript/javascript');
// Enables linting for javascript
require('codemirror/addon/lint/lint');
require('codemirror/addon/lint/javascript-lint');

window.JSHINT = require('jshint').JSHINT;

const defaultOptions = {
  lint: true,
};

render(
  <ReactCodeMirror
    options={defaultOptions}
    value={'some\ncode'}
  />, document.querySelector('#root')
);

Webpack配置：

  entry: './src/main.js',

  mode: 'development',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  module: {
    rules: [
      { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
      { test: [/\/src\/(?:.*)\.js$/], use: { loader: 'babel-loader' } },
    ]
  },

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          mangle: false,
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ]
  }

​

​

Answer 1

造成这种情况的根本原因是UglifyJS中的一个bug (报告的这里)。

最小可复制代码：

(function(mod) {
  mod();
})(function() {
  function getMaxSeverity(ax, bx) {
    if (ax === "error") {
      return ax;
    } else {
      return bx;
    }
  }
  function main() {
    var arr = ['hey'];
    for (var i = 0; i < arr.length; i++) {
      console.log(getMaxSeverity('one', 'two'));
    }
  }
  main();
});

解决方法是压缩内联选项。

optimization: {
  minimizer: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          inline: 1,
        }
      }
    })
  ]
}