The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）

学习之路基于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

The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）相关推荐

[TPAMI-2023] Learning to Extract Building Footprints From Off-Nadir Aerial Images
论文阅读 [TPAMI-2023] Learning to Extract Building Footprints From Off-Nadir Aerial Images 论文搜索(studyai. ...
(20/24) webpack实战技巧：watch实现热打包和添加代码备注
(20/24) webpack实战技巧:watch实现热打包和添加代码备注在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发, ...
webpack 如何抽离公共代码和第三方库？
假设有下面三种场景场景一:index.js 和 other.js 文件同时引入 common.js 文件,打包的时候 index.js 和 other.js 中的 common.js 会打包两次.这 ...
TVM TIR Pass - CSE (Common Subexpression Elimination) 优化原理和代码解析 PR#9482
理论预备知识 TIR Let Binding Let (var, value, body) 将value求值赋给var,然后返回body的求值结果.let将表达式 Expr 绑定到局部作用域的不可变 ...
The way of Webpack learning (IV.) -- Packaging CSS（打包css）
一:目录结构二:webpack.config.js的配置 const path = require('path');module.exports = {mode:'development',entr ...
Learning with Noisy Correspondence for Cross-modal Matching 文献翻译代码简析
Learning with Noisy Correspondence for Cross-modal Matching 基于噪声对应的跨模态匹配学习 Learning with Noisy Corre ...
高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间...
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(二)-webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
接上篇在上一篇博客中, 我们白手起家, 从零搭建了 webpack + vue + AdminLTE 多页面脚手架. 代码在这里: easydss-web-src , 我为第一篇博客建立了单独的分支 ...
用Java线程获取优异性能（II）——使用同步连载线程访问关键代码部份
摘要开发者有时创建的多线程程序会生成错误值或产生其它奇怪的行为.古怪行为一般出现在一个多线程程序没使用同步连载线程访问关键代码部份的时候.同步连载线程访问关键代码部份是什么意思呢?在这篇文章中解释了 ...

The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）

The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）相关推荐

最新文章

热门文章