Webpack 4.1.1 和 UglifyJS2 的问题 - 生产模式破坏代码，抛出未捕获的错误

Question

我已经将一个项目升级到 Webpack 4.1.1 并遇到了一个我似乎无法解决的 UglifyJS 错误。

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

虽然我认为这是一个错误，但我想尝试配置 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 中的错误（已报告 here）。

最小可重现代码：

(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,
        }
      }
    })
  ]
}

Webpack 4.1.1 和 UglifyJS2 的问题 - 生产模式破坏代码，抛出未捕获的错误

Issue with Webpack 4.1.1 and UglifyJS2 - Production mode mangles code which throws uncaught error

codemirror

uglifyjs

reactjs

webpack