webpack 4 uglifyjs 没有缩小和压缩

Question

我正在使用 webpack 4，我不确定我的代码是否被压缩和缩小。我也在使用 React。

我的第一个问题是在 webpackplugin属性或optimization属性中使用 Webpack UglifyJS 插件。当我使用该plugin属性时，它似乎至少会压缩，但不会压缩到一行。我仍然不确定它是否正在缩小。当我使用optimization它时甚至不压缩。当我查看捆绑的 js 文件时，它似乎捆绑了node_modules诸如webpack.

//与 plugin

module.exports = {
    ...
    plugins: [new UglifyJsPlugin({
        test: /\.js$/,
        exclude: /node_modules/,
        sourceMap: true,
        uglifyOptions: {
            compress: {},
            mangle: true,
        }
}],

//不适用于 optimization

module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            test: /\.js$/,
            exclude: /node_modules/,
            sourceMap: true,
            uglifyOptions: {
                compress: {},
                mangle: true,
             }
       }],
    }

在第一个示例中，代码至少被压缩但没有被压缩成一行。

//例子

!*** ./node_modules/scheduler/index.js ***!
  \*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {} else {\n...

 !*** ./node_modules/scheduler/tracing.js ***!
  \*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {...

也不确定它是否被缩小。我在 React 组件中写了一个函数

someFunc(one, two) {
    return one + two
}

根据 npm uglifyjs 文档，这应该缩小为

someFunc(a, b) { \n return a+b\n}

但它被输出为

someFunc(one, two) { \n return one + two\n}

这是在缩小吗？

Answer 1

Webpack 4 默认在productionmode中进行优化和缩小。

所以如果我猜对了，你的配置就是development配置。

您可以删除显式的 UglifyJsPlugin 定义并将其设置mode为production，Webpack 将处理所有事情。

mode: 'production',
plugins: [...],
optimization: ...

如果必须，您可以自定义优化。但是将模式设置为production将产生您预期的结果。

更多信息在这里

Webpack 4 模式使用