webpack 3:无法分离供应商块

时间:2019-04-28 19:01:17

标签: reactjs webpack

我正在尝试配置Webpack,以使供应商和清单块分开,但是,当我构建React应用程序时,我只会得到清单块。这是我的配置文件:

const config = {
entry: {
    app: './src/app.js',
},
output: {
    filename: '[name].[chunkhash:6].bundle.js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [{
        test: /\.js$/,
        include: /src/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader",
            options: {
                presets: ['env', 'react', 'es2015']
            }
        }
    }, {
        test: /\.html$/,
        use: ['html-loader']
    }, {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
        use: extractPlugin.extract({
            use: [
                'css-loader', 
                'sass-loader', 
                'resolve-url-loader',
                'style-loader'
            ],
            fallback: 'style-loader' 
        })
    }]
},
plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    extractPlugin,
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: ({
            resource
        }) => /node_modules/.test(resource),
    }),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest'
    }),
    new BundleAnalyzerPlugin({
        analyzerMode: 'static'
    })
],
devServer: {
    contentBase: path.resolve(__dirname, "./dist/assets/media"),
    compress: true,
    port: 12000,
    stats: 'errors-only',
    open: true
},
devtool: 'inline-source-map'
}; 

module.exports = config;

以下是输出:

enter image description here

如您所见,即使我指定了清单,也只能获得清单,而不能获得供应商块。

0 个答案:

没有答案