Webpack 和 CommonsChunkPlugin，为每个异步 block 分离出 node_modules

Question

我已经成功让 Webpack 和 CommonsChunkPlugin 将我的代码分成两部分 - 一个包含我的代码库，另一个包含从 node_modules 导入的所有内容。这是相对容易的一点。

我试图在我的应用程序中实现的下一件事是动态导入一个“子应用程序”，它具有完全不同的 vendor 包要求(例如React - 我的主应用程序不使用它，但我的子应用程序) app 确实如此)，而所有这些包都没有出现在主 vendor 文件中。

如果我添加 import()，但保持我的 Webpack 配置相对不变，我最终会得到 4 个包

1. Webpack 运行时
2. 主要应用代码库
3. vendor bundle ，包含主应用代码库中导入的所有内容
4. 动态导入的包，也包含导入的所有node_modules :(

这是不可取的。我也希望从我的子应用程序的主代码库中获得“我的代码与 vendor 代码”的相同好处。理想情况下，我最终会得到 5 包，其中上面列表中的#4 分成两份。当动态导入在运行时发生时，它会以某种方式神奇地加载到我的子应用程序代码包以及随附的子应用程序 vendor 包中。理想情况下，子 vendor bundle 不包含主 vendor bundle 中存在的任何内容。

在尝试了我在各种博客文章中找到的很多内容之后，我遇到了一种情况，我手动选择我想要包含在单独的 vendor 包中的node_modules目录，但问题是它不会'不会自动包含它们的依赖项，因此我的子应用程序包中仍然会包含大量的 node_modules - 我没有专门导入它们。

如果我能让它正常工作，我想将它复制到我的主应用程序的更多子应用程序中。

<小时/>

更新 1

我的 Webpack 配置分为 3 个文件 - common、dev 和 prod。只有 common 和 dev 与此相关，因此我将在这里分享它们。

webpack.common.js

const webpack = require('webpack');
const path = require('path');

const NameAllModulesPlugin = require('name-all-modules-plugin');

module.exports = {
    entry: {
        /**
         * main.js - our global platform JS
         */
        main: './src/app.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        [
                            'env',
                            {
                                'targets': {
                                    'browsers': ['last 3 versions', 'ie >= 11']
                                }
                            }
                        ],
                        'react'
                    ],
                    plugins: [
                        'transform-class-properties',
                        'transform-object-rest-spread',

                        // Followed instructions here to get dynamic imports working
                        // http://docs1.w3cub.com/webpack~2/guides/code-splitting-import/
                        'syntax-dynamic-import',
                        'transform-async-to-generator',
                        'transform-regenerator',
                        'transform-runtime'
                    ]
                }
            }
        ]
    },
    resolve: {
        alias: {
            src: path.resolve(__dirname, 'src/')
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            CodeMirror: 'codemirror'
        }),

        new webpack.NamedModulesPlugin(),

        new webpack.NamedChunksPlugin(),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: (m) => /node_modules/.test(m.context)
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'runtime',
            minChunks: Infinity
        }),

        new NameAllModulesPlugin()
    ]
};

webpack.dev.js

const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    output: {
        filename: '[name].js',
        chunkFilename: '[name]-chunk.js', // used for async chunks (those loaded via import())
        path: path.resolve(__dirname, 'build'),
        publicPath: '/js/build/'
    },
    plugins: [
        // Uncomment and run build, to launch the bundle analyzer webpage
        new BundleAnalyzerPlugin(),

        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: JSON.stringify('dev') }
        })
    ]
});

<小时/>

更新2

我偶然发现了一个似乎有效的配置。它甚至会在实际导入的同时自动加载到子应用程序的 vendor block 中。

// For the main app's modules
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: (m, count) => /node_modules/.test(m.context)
}),

// For my sub app's modules
new webpack.optimize.CommonsChunkPlugin({
    name: 'any-name-here', // doesn't appear to be used anywhere, but prevents 'main' from showing up in the chunk filename (?!)
    chunks: ['name-of-dynamic-import'], // this has to be the 'webpackChunkName' you've used within the import() statement
    async: 'name-of-dynamic-import-vendor', // name the chunk filename
    minChunks: (m, count) => /node_modules/.test(m.context)
}),

new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime',
    minChunks: Infinity
}),

Answer 1

那么让我们来详分割析一下您提供的 CommonsChunkPlugin“说明”:

动态 vendor block 创建

    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: (m) => /node_modules/.test(m.context)
    }),

上面您告诉 webpack，它需要仅基于一个条件将“x”模块包含到名为“vendor”的特定新包中。条件是该模块完全解析的路径位于 node_modules 内。但是，如果你看 our documentation ，还有第二个参数: count ，它会被调用，您可以在应用程序中利用它。这很重要，因为现在，如果您有 20 个延迟加载的 bundle ，并且只有一个使用“react”，则所有 bundle 都将要求您从 vendor block 加载该 react 依赖项(也称为 count=1)。相反，我建议您在此处附加谓词以显示:

minChunks: (m, count) => /node_modules/.test(m.context) && count >= 10

用对话术语来说，你可以考虑这个有说服力的 webpack:

Sup, webpack! Whenever you come across a module (whos resolved path includes node_modules), that is referenced in 10 or more bundles [chunks], extract it into a separate bundle called vendor.

这样，当且仅当 x 个惰性 bundle 需要此 dep 时，它将被移动到 vendor block 。现在，如果您达到 10 个需要此 dep 的惰性 bundle ，它们就会浮出水面。如果您希望它不作为 sync 依赖项 float ，而是作为共享的异步，您还可以在插件选项中添加 async: true 标志em> 捆绑。

强制 webpack 运行时进入单独的包

    new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime',
        minChunks: Infinity
    })

这是专门用于长期缓存的功能，因此当您延迟加载 bundle 时，可能更改的 list 不会导致哈希更改。这可以保持不变。