node.js - 用于 NodeJS 的 WebPack 4 SplitChunksPlugin

Question

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

我已经按如下方式配置了 Webpack，但我的主包不起作用，因为它不是为能够需要其他文件而构建的(每个 npm 依赖项都有一个文件)。如何配置 WebPack 来生成 NodeJS 中相互需要的 block ？

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}`;
            },
        },
    },
},

Answer 1

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

这使得您可以精确地选择您想要缩小的输入文件(Webpack 将其称为 Assets )以及您不想缩小的输入文件。

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