[英]In webpack can I only use commonchunks plugin in one entry bundle
I have an app with 2 bundles, and common modules eg react
are extracted into a vendor bundle. 我有一个包含2个捆绑包的应用,并且将诸如
react
类的通用模块提取到了一个供应商捆绑包中。 I am adding a 3rd bundle which I don't want to extract common dependancies from. 我要添加一个第三束,我不想从中提取常见的依赖关系。 Is this possible.
这可能吗。
This question is related to this one however that is about creating multiple vendor bundles for each entry point, whereas I want one of the bundles to not require vendor. 这个问题关系到这一个却是关于每个入口点创造多个供应商的捆绑,而我想束的一个不要求供应商。 In my case it is because the script is a simple site verification script which is being set in the head, so will be before the
vendor
bundlde. 就我而言,这是因为该脚本是一个简单的站点验证脚本,该脚本已设置在头部,因此将在
vendor
捆绑销售之前。 However I still want to be able to use modules in this head
bundle. 但是我仍然希望能够使用此
head
包中的模块。
const webpack = require('webpack');
const path = require('path');
const config = {
entry: {
vendor: [
'jquery',
'react',
'react-dom'
],
main: [
'./bundles/main/App',
],
cms: [
'./bundles/cms/App'
],
head: [
'./bundles/head/App'
],
},
output: {
filename: '[name]-bundle.js',
path: '../app/assets/webpack',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-bundle.js',
minChunks: Infinity,
})
],
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
],
},
};
module.exports = config;
It seems the similar question on code splitting multiple bundles did actually help answer my question. 似乎有关拆分多个捆绑包的代码的类似问题确实有助于回答我的问题。 In particular Michael Margiel's answer having multiple vendor bundles specified with multiple CommonsChunkPlugins which I think is the cleanest approach.
特别是迈克尔·马吉尔(Michael Margiel)的答案,其中指定了多个带有CommonsChunkPlugins的供应商捆绑包,我认为这是最干净的方法。
Having entry specific vendor chunks using CommonsChunkPlugins multiple times: 使用CommonsChunkPlugins多次使用特定于条目的供应商块:
new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity)
And then declare different extenral libraries for different files: 然后为不同的文件声明不同的扩展库:
entry: {
page1: ['entry.js'],
page2: ['entry2.js'],
"vendor-page1": [
'lodash'
],
"vendor-page2": [
'jquery',
'react'
]
},
This enabled me to have the bundle without any vendor includes without needing any additional steps, however I could have a vendor for that 3rd bundle if I wanted, down the track. 这使我可以在没有任何供应商的情况下获得捆绑软件,而无需任何其他步骤,但是如果需要,我可以为该第三捆绑软件提供供应商。
My config in the end looked like this: 最后,我的配置如下所示:
const webpack = require('webpack');
const path = require('path');
const config = {
entry: {
head: ['./bundles/head/App'],
main: ['./bundles/main/App'],
cms: ['./bundles/cms/App'],
'vendor': [
'babel-polyfill',
'jquery',
'react'
],
'vendor-cms': [
'jquery'
]
},
output: {
filename: '[name]-bundle.js',
path: '../app/assets/webpack',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-bundle.js',
chunks: ['main'],
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor-cms',
filename: 'vendor-cms-bundle.js',
chunks: ['cms'],
minChunks: Infinity,
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(nodeEnv)},
}),
],
module: {
loaders: [
{test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
],
},
};
module.exports = config;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.