webpack 4不压缩不压缩

Question

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

我的第一个问题是在Webpack的plugin属性或optimization属性中使用webpack UglifyJS插件。当我使用plugin属性时，它看起来至少可以压缩到一行，但不是一行。我仍然不确定它是否在缩小。当我使用optimization时，它甚至不能压缩。当我查看我捆绑的js文件时，它似乎捆绑了webpack等node_modules中的内容。

//与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

默认情况下，production模式下，Webpack 4会做优化和缩小。

因此，如果我的猜测是正确的，那么您的配置是development配置。

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

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

如果有必要，您可以自定义您的优化。但是将模式设置为production会得到预期的结果。

更多信息请点击此处

Webpack 4 mode usage

Answer 2

我也面临着同样的问题。它在提供模式配置值作为生产模式后开始工作。

module.exports = {
    // webpack config
    mode: process.env.NODE_ENV || 'development',
};

// command NODE_ENV=production webpack