只最小化一个 Webpack 块

Question

我想最小化我的 Javascript 生产代码。但是我不想最小化供应商的代码，因为他们已经有了最小化版本。

我当前的 webpack.config.js 将输出代码分成两块。

module.exports = {

    entry: {
        vendor: ['jquery','angular'],
        app: ['./Client/app.start.js']
    },
    output: {
        filename: 'bundle.js',
        path: __dirname
    },

    resolve : {
        alias : {
            'angular' : 'angular/angular.min.js',
            'jquery'  : 'jquery/dist/jquery.min.js'
        }
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]
}

当我运行 >> webpack 时，两个块（"bundle.js" 和 "vendor.bundle.js"）都被最小化了。如何配置 Webpack 以仅最小化 "bundle.js"?

谢谢

Answer 1

通常，对于生产和开发，您会有不同的配置（一个有 uglify，另一个没有），如果您想要的话，您只会在生产中最小化。

您可能已经知道这一点，但最好了解透彻。您可能不知道的是，webpack 做得更好，建议使用未修改的代码并让 webpack 完成它的工作。我不相信 uglifyJsPlugin 能够定位块，也许有另一个插件可以做到这一点，但我不知道。

附带说明一下，您不必担心双倍缩小，考虑到它是生产环境并且不会随时更改，它会增加一点影响。

Answer 2

如果出于某种原因，您真的只想缩小一个包，您可以使用 UglifyJsPlugin 的 test 选项。使用包名称并且不要使用正则表达式测试单个模块，因为当代码被 UglifyJsPlugin 使用时它已经被捆绑了。

new webpack.optimize.UglifyJsPlugin({
    compress: { warnings: false },
    test: /(vendor.bundle.js\.js)+/i
})

查看文档：https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

test, include, exclude (RegExp|Array): configure filtering of processed files (default: test: /.js($|\?)/i)

Answer 3

这可以通过 hack 来实现，您可以在 webpack.config.js 文件中的以下代码中看到： `

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const PRODUCTION = process.env.NODE_ENV === 'production';
const plugins = [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor', filename: './assets/js/vendor.min.js',
        minChunks: Infinity
    }),
    new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            }
        }),
(...etc other plugins)
];
if (PRODUCTION) {
    plugins.push(new UglifyJsPlugin({
        include: /\.min\.js$/
    }));
}

`

检查您是否正在创建生产版本。然后，您可以将要创建的块命名为带有“.min.js”扩展名的缩小块。 Rest unglifyjsplugin -> include filter 将确保只有这些 chuks 会被缩小。

在这里，在这种情况下，它只会缩小 vendor.min.js 文件。

只最小化一个 Webpack 块

Minimize only one Webpack chunk

javascript

webpack