学习之路基于webpack3.10.0,webpack4.0之后更新。
多页面提取公共代码!!!
一:文件关系
pageA --> subA、subB --> moduleA
pageB --> subA、subB --> moduleA
那么pageA、pageB 的公共代码就是subA、subB 、moduleA。
二:webpack.config.js文件配置
var webpack = require(‘webpack‘)var path = require(‘path‘);module.exports = { ???entry:{ ???????"pageA":‘./src/pageA.js‘, ???????"pageB":‘./src/pageB.js‘, ???????‘vendor‘:[‘lodash‘]//第三方插件 ???}, ???output:{ ???????path:path.resolve(__dirname,‘./dist‘), ???????filename:‘[name].bundle.js‘, ???????chunkFilename:‘[name].chunk.js‘ ???}, ???plugins:[ ???????new webpack.optimize.CommonsChunkPlugin({//打包业务逻辑上面的公共代码 ???????????name:‘common‘, ???????????minChunks:2, ???????????chunks:[‘pageA‘,‘pageB‘] ???????}), ???????new webpack.optimize.CommonsChunkPlugin({//打包第三方插件lodash的代码 ???????????name:‘vendor‘, ???????????minChunks:Infinity ???????}), ???????new webpack.optimize.CommonsChunkPlugin({//打包webpack代码 ???????????name:‘manifest‘, ???????????minChunks:Infinity ???????}) ???]}
打包公共代码只适合多页面应用。
三:webpack4中的打包公共代码
webpack4已经移除了commonchunkPlugin,直接在配置里面写即可。
const webpack = require("webpack");const path = require("path");module.exports = { ???mode:‘development‘, ???// 多页面应用 ???entry: { ???????pageA: "./src/pageA.js", ???????pageB: "./src/pageB.js" ???}, ???output: { ???????path: path.resolve(__dirname, "dist"), ???????filename: "[name].bundle.js", ???????chunkFilename: "[name].chunk.js" ???}, ???optimization: { ???????splitChunks: { ???????????cacheGroups: { ???????????????// 注意: priority属性 ???????????????// 其次: 打包业务中公共代码 ???????????????common: { ???????????????????name: "common", ???????????????????chunks: "all", ???????????????????minSize: 1, ???????????????????priority: 0//优先级 ???????????????}, ???????????????// 首先: 打包node_modules中的文件 ???????????????vendor: { ???????????????????name: "vendor", ???????????????????test: /[\\/]node_modules[\\/]/, ???????????????????chunks: "all", ???????????????????priority: 10 ???????????????} ???????????} ???????} ???}};
The way of Webpack learning (II.) -- Extract common code(多页面提取公共代码)
原文地址:https://www.cnblogs.com/weihuan/p/9635768.html