我正在尝试配置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;
以下是输出:
如您所见,即使我指定了清单,也只能获得清单,而不能获得供应商块。