更新到webpack 4之后,我无法获得与现在不赞成使用的CommonsChunkPlugin进行拆分的代码。
我的webpack配置中有2个js条目-主要和次要。 中学中学延伸小学。
Trivial Secondary.js
import Primary from './Primary';
const Components = {
Secondary: {
SecondaryComponent
},
...Primary.Components
};
Object.assign(Primary, Secondary);
export default Primary;
使用CommonsChunkPlugin时,文件已正确分离(即,主要块中的代码未包含在次要块中,而是作为依赖项)。 Webpack的配置通常如下所示:
new webpack.optimize.CommonsChunkPlugin({
name: "primary",
filename: 'primary.js'
})
这工作得很好,但是由于Webpack 4中不推荐使用CommonsChunkPlugin,所以我不能使用它。
在加载primary.js和secondary.js之后,所有来自primary的代码都会重复,包括外部代码:
简化的webpack配置:
module.exports = {
entry: {
'primary': './Scripts/Src/primary.js',
'secondary': './Scripts/Src/secondary.js',
},
output: {
path: path.join(__dirname, 'Scripts/Dist'),
filename: '[name].js',
library: 'Name',
libraryTarget: 'umd',
libraryExport: 'default'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
primary: {
name: 'primary'
}
}
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
},
]
}
}
是否可能仅将主要代码包含在单独的块中,以便次要对象作为主要代码的扩展而不重复代码?