Я пытаюсь настроить 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](https://i.stack.imgur.com/kbQ3L.png)
Как вы можете видеть, я могу получить только манифест, а не блок вендора, хотя я и указал это.