webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. webpack4.0CommonsChunkPlugin
CommonsChunkPluginSplitChunksPlugin
:
input / output configuration:
entry: path.join (_ _ dirname,".. / src/index.js"), / / input: project master file (entry file)
output: { //
filename: "build.[hash:8].js", //
path: path.join(__dirname, "./dist") //
}
generate the configuration of the environment:
webpack.config.client.js
config = merge(baseConfig,{
entry:{ //
app: path.join(__dirname, "../src/index.js"),
vendor: ["vue"]
},
output:{
filename: "[name].[chunkhash:8].js",
},
module:{
rules:[
{
fallback: "style-loader",
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
"stylus-loader"
]
}
]
},
plugins:defaultPluins.concat([
new ExtractPlugin("styles.[contentHash:8].css"),
//
new webpack.optimize.SplitChunksPlugin({
name: "vendor"
}),
// webpack
new webpack.optimize.SplitChunksPlugin({
name: "runtime"
})
]),
optimization:{
splitChunks: {
cacheGroups: { // chunks
commons: {
chunks: "initial", // : "initial" | "all" | "async"()
minSize: 0, // 0,
minChunks: 2, // chunk 1
maxInitialRequests: 5 // 1
},
vendor: {
test: /node_modules/, // chunk
chunks: "initial", // : "initial" | "all" | "async"()
name: "vendor", // chunk
priority: 10, //
enforce: true
}
}
},
runtimeChunk: true
}
})