用于 NodeJS 的 WebPack 4 SplitChunksPlugin答案

【问题标题】：WebPack 4 SplitChunksPlugin for NodeJS用于 NodeJS 的 WebPack 4 SplitChunksPlugin
【发布时间】：2019-01-25 20:12:28
【问题描述】：

我正在为 NodeJS 8.x (AWS Lambda) 生成包，并希望有选择地缩小块（业务代码保持未缩小，第三方库被缩小以节省包大小）。

我已经将 Webpack 配置如下，但我的主要捆绑包不起作用，因为它不是为了能够需要其他文件（每个 npm 依赖项一个文件）而构建的。如何配置 WebPack 以生成在 NodeJS 中可以相互要求的块？

splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: (module) => {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                return `npm.${packageName}`;
            },
        },
    },
},

【问题讨论】：

你能解决这个问题吗？
@Avij 看到我的回答。

标签： node.js webpack

【解决方案1】：

我没有选择性地缩小输出块，而是选择根本不使用 SplitChunksPlugin，而是在自定义加载器中缩小作为编译的一部分。

这使得您可以准确地挑选出您想要缩小哪些输入文件（Webpack 将它们称为资产）以及您不想缩小哪些输入文件。

npm install terser --save-dev

tools/es-minify-loader.js

const Terser = require('terser');

module.exports = function esMinifyLoader(source) {
    const output = Terser.minify(source, { compress: true, mangle: true });
    return output.code;
};

webpack.config.js

...
module: {
    rules: [
        {
            exclude: [
                /dont-minify-this-file\.js/,
                /some-library-or-folder-you-dont-want-minified/i,
            ],
            test: [
                /\.js$/
            ],
            use: [
                {
                    loader: path.resolve(__dirname, 'tools/es-minify-loader.js'),
                }
            ]
        }
    ]
},
...

【讨论】：