學(xué)習(xí)之路基于webpack3.10.0，webpack4.0之后更新。

多頁面提取公共代碼！！！

一：文件關(guān)系

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({//打包業(yè)務(wù)邏輯上面的公共代碼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})] }

　　打包公共代碼只適合多頁面應(yīng)用。

三：webpack4中的打包公共代碼

webpack4已經(jīng)移除了commonchunkPlugin，直接在配置里面寫即可。

const webpack = require("webpack"); const path = require("path");module.exports = {mode:'development',// 多頁面應(yīng)用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屬性// 其次: 打包業(yè)務(wù)中公共代碼common: {name: "common",chunks: "all",minSize: 1,priority: 0//優(yōu)先級},// 首先: 打包node_modules中的文件vendor: {name: "vendor",test: /[\\/]node_modules[\\/]/,chunks: "all",priority: 10}}}} };

　　

轉(zhuǎn)載于:https://www.cnblogs.com/weihuan/p/9635768.html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。