學習之路基于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}}}} };

　　

轉載于:https://www.cnblogs.com/weihuan/p/9635768.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。