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

假设我有一个丰富的应用程序，它使用了很多第三方模块，包括lodash、矩、axios和react

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

我希望webpack以存储以下内容的方式打包我的库：

洛达斯

分开的时刻

所有其他节点_模块都存储在供应商包下

应用程序的代码存储在单独的文件中

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

我准备了示例存储库来说明我的问题：

网页输入部分(

下面是生产配置（），尝试分离模块：

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仍将出现在供应商包中。我希望将它们放在两个单独的包中

---

任何想法都值得欣赏。

如果您从CDN中包含它们并使用

---

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

如果您从CDN中包含这些用户并使用

---

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

最后，我在github问题中收到了@sokra的帮助：

对于那些将面临相同问题的人，以下是完整的网页配置，它解决了问题中描述的问题：

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'
}

---

感谢所有试图帮助我的人！

最后，我在github问题中收到了@sokra的帮助：

对于那些将面临相同问题的人，以下是完整的网页配置，它解决了问题中描述的问题：

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'
}

---

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

这样做需要在脚本中将它们用作全局变量。当然这是一个选项，但问题的范围需要使用代码拆分。这样做需要在脚本中将它们用作全局变量。当然这是一个选项，但问题的范围需要使用代码拆分。您是否尝试过使用CommonChunkPlugin的两个实例，一个是

名称：“lodash”

，另一个是

时刻
？或者
名称：[“lodash”，“webpack”]
，正如建议的那样。是的，我尝试过，但没有帮助。或者我尝试了错误的方式。您是否尝试过使用CommonChunkPlugin的两个实例，一个是
名称：“lodash”
，另一个代表
时刻
？或
名称：[“lodash”，“webpack”]
，正如建议的那样。是的，我试过了，但没用。或者我试错了。