webpack浅析

Posted 2022-07-22 sisi2020

1.介绍webpack

webpack是模块打包机，宗旨是一切皆模块。通过入口文件解析打包成bundle.js文件，通过loader转换不能识别的less,sass,图片,.vue等文件，通过plugin扩展webpack功能。

2.升级webpack4

安装npm-check-updates文件，更新pakage.json文件

删除node_modules文件和pakage-lock.json文件

重新安装webpack-cli（因为webpack4中webpack-cli和webpack分成两个npm包）

babel-core报错，安装回babel-loader7.1.5

extract-css-plugin更新到@next版本(或者使用mini-css-extract-plugin推荐使用，两者区别，前者会把所有css文件打包到一个app.css文件，后者会依据懒加载方式拆分，这样页面css可以和js一样使用按需加载)

mini-css-extract-plugin使用注意修改：

//util.js更改

 

if (options.extract)
// return ExtractTextPlugin.extract(
// use: loaders,
// fallback: ‘vue-style-loader‘
// )
if(process.env.NODE_ENV !== ‘production‘)
return [‘style-loader‘].concat(loaders)

return [miniCssExtractPlugin.loader].concat(loaders)
else
return [‘vue-style-loader‘].concat(loaders)

//webpack.prod.js修改

// new ExtractTextPlugin(
// filename: utils.assetsPath(‘css/[name].[hash].css‘),
// allChunks: true,
// ),
new miniCssExtractPlugin(
filename: utils.assetsPath(‘css/[name].[chunkhash].css‘),
allChunks: true,
),

去掉commonChunk配置，增加optimization.splitChunks，和plugins通层级

optimization:
splitChunks:
chunks: "all",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: ‘~‘,
name: true,
cacheGroups:
async:
chunks: "async",
minChunks: 1, // 代码块至少被引用的次数
maxInitialRequests: 3, // 设置最大的请求数
minSize: 0, // 设置每个 chunk 最小的大小 (默认30000)，这里设置为 0，以方便测试
automaticNameDelimiter: ‘~‘,
priority: 8
,
vendors:
chunks: "all", // 使用 all 模式
test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 下的模块
name: "vendors", // 包命名，最终的命名要结合 output 的 chunkFilename
minChunks: 1,
minSize: 30000,
priority: 10, // 设置优先级
reuseExistingChunk: true,
,
common:
chunks: "all",
minChunks: 2,
name:‘common‘,
priority: 9,
reuseExistingChunk: true


,
runtimeChunk:
name: ‘manifest‘

添加mode

添加vue-loader里面的vueLoaderPlugin

//webpack.base.js

const VueLoaderPlugin = require(‘vue-loader‘)

plugins: [
new VueLoaderPlugin()
],

 

3.项目优化

缓存、懒加载、压缩代码、内嵌图片、内嵌manifest、合并碎片包(js打包输出文件不适合太多，因为浏览器加载js线程一般为4到5个，所以文件比较小的一些第三方或公共js不适合单独打包成一个文件)

使用external cdn

 

<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js" type="text/javascript"></script>
<!-- 为cdn引入资源不会阻塞页面渲染可以在script上添加defer或者async,异步加载 -->
<!-- async异步加载完成后,会立即执行,执行时间会阻塞html parse,所以不适合用来有dom操作的js文件 -->
<!-- defer异步加载完成后,会在html parse之后执行-->
<!-- vue 使用cdn加载不适合defer和async-->

 

4.打包文件分析（webpack4）

打包后的manifest.js文件是一个立即执行函数、可以对照打包后的boostrap.js查看

//webpackJsonp.push之后的回调执行函数

function webpackJsonpCallback(data)  

...//省略

return checkDeferredModules();
;

//加载函数

// The require function
function __webpack_require__(moduleId)

// Check if module is in cache
if(installedModules[moduleId])
return installedModules[moduleId].exports;

// Create a new module (and put it into the cache)
var module = installedModules[moduleId] =
i: moduleId,
l: false,
exports:
;

// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

// Flag the module as loaded
module.l = true;

// Return the exports of the module
return module.exports;

// The chunk loading function for additional chunks
__webpack_require__.e = function requireEnsure(chunkId)
var promises = [];

// mini-css-extract-plugin CSS loading
var cssChunks = "3":1,"4":1;
if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId])
promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject)
...//省略
;

// JSONP chunk loading for javascript

var installedChunkData = installedChunks[chunkId];
if(installedChunkData !== 0) // 0 means "already installed".

// a Promise means "currently loading".
if(installedChunkData)
promises.push(installedChunkData[2]);
else
// setup Promise in chunk cache
var promise = new Promise(function(resolve, reject)
installedChunkData = installedChunks[chunkId] = [resolve, reject];
);
promises.push(installedChunkData[2] = promise);

...//省略

return Promise.all(promises);
;

var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
jsonpArray.push = webpackJsonpCallback;（这里重置push函数，当别的文件使用window[‘webpackJsonp‘].push的时候会调用这个函数）
jsonpArray = jsonpArray.slice();
for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;

参考文件webpack是怎么运行的

5.构建流程

Webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。 Webpack 通过 Tapable 来组织这条复杂的生产线。 Webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 Webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。 —吴浩麟《深入浅出webpack》

解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
输出所有chunk到文件系统。

初始化配置参数 -> 绑定事件钩子回调(这里相当于一个订阅和发布) -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件

 

6.webpack插件介绍

参考webpack插件