Webpack 2：将库、供应商和应用程序拆分为不同的文件

Question

想象一下我有一个丰富的应用程序，它使用了很多第三方模块，包括 lodash、moment、axios、反应。

如果我最后将所有内容捆绑在一个包中，大小会高于 1MB。

我希望 webpack 以它存储的方式打包我的库：

1. lodash 分开
2. 时刻分别
3. 所有其他 node_modules 都存储在 vendor bundle 下
4. 应用程序的代码存储在单独的文件中

我尝试以不同的方式使用 CommonsChunkPlugin，但从未收到我想要的结果。

我已经准备了示例存储库来说明我的问题： https://github.com/PavelPolyakov/webpack-react-bundles

Webpack 入口部分（conf/webpack.base.config.js):

entry: {
    lodash: 'lodash',
    moment: 'moment',
    app: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3001',
        'webpack/hot/only-dev-server',
        './app/index.js']
}

这是生产配置 (conf/webpack.production.config.js)，试图分离模块：

plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module) {
                // this assumes your vendor imports exist in the node_modules directory
                return module.context &&
                    module.context.indexOf('node_modules') !== -1;
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
                warnings: true
            }
        })]

在这种情况下，moment 和 lodash 仍然会出现在 vendor bundle 中。我想把它们放在两个单独的包中。

任何想法表示赞赏。

Answer 1

最后，我在 github 问题中收到了 @sokra 的帮助： https://github.com/webpack/webpack/issues/4638

对于那些将面临同样问题的人，这里是解决问题中描述的问题的完整 webpack 配置：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: ['./app/index.js']
    },
    output: {
        filename: '[name].bundle.js',
        sourceMapFilename: '[name].bundle.map',
        path: path.resolve(__dirname, './dist')
    },
    devServer: {
        port: 3001,
        contentBase: path.resolve(__dirname, './dist'),
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [['es2015', { 'modules': false }], 'react'],
                            plugins: ['transform-async-to-generator',
                                'transform-decorators-legacy',
                                'transform-runtime',
                                'react-html-attrs',
                                'react-hot-loader/babel'],
                        }
                    }
                ]
            },
            {
                test: /\.css/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|gif|jpg|png)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            inject: "body"
        }),
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
                warnings: true
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: (m) => /node_modules/.test(m.context)
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'lodash',
            minChunks: (m) => /node_modules\/(?:lodash|moment)/.test(m.context)
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'moment',
            minChunks: (m) => /node_modules\/(?:moment)/.test(m.context)
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "manifest",
            minChunks: Infinity
        })
    ],
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devtool: 'source-map'
}

感谢所有试图提供帮助的人！

Answer 2

如果您从 CDN 中包含它们并使用 external，这可能是最简单的。

这不是按定义进行代码拆分，但可能接近您想要完成的目标：减小包大小。一些用户的 CDN 版本已经从另一个站点缓存，这是有好处的。