webpack学习笔记：发展背景、工作机制、核心配置、性能优化

最新推荐文章于 2024-04-17 15:12:26 发布

E-A-D-G-B-E

最新推荐文章于 2024-04-17 15:12:26 发布

阅读量5.3k

点赞数 30

文章标签： webpack javascript reactjs npm

本文链接：https://blog.csdn.net/z591391960/article/details/105612471

版权

说明：根据B站学习视频：【2020新课程】Webpack从原理到实战完整版-深入浅出，简单易学，前端工程师必学经典内容！学习整理，如有错误，欢迎随时指正，互相学习。
本次学习到的内容：

webpack产生的背景
理解前端的模块化、模块化演变的过程
理解webpack打包的核心思路
webpack核心：loader
webpack核心：plugin

1 webpack是什么

一个现代JavaScript应用程序的静态模块打包器

默认：只对js进行处理，其他类型文件需要配置loader或者插件进行处理。
打包：将各个依赖文件进行梳理打包，形成一个JS依赖文件。

2 webpack产生的背景

首先，为什么打包？因为：

各个依赖文件的关系难以梳理，耦合程度较高，代码难以维护。
把所有依赖包都打包成为一个js文件（bundle.js）文件，会有效降低文件请求次数，一定程度提升性能。
逻辑多、文件多，项目复杂度提高
其他

然后，为什么要用webpack？因为：

webpack除提供上述功能外，还充当了“翻译官”的角色，例如将ES6翻译为低版本的语法，将less、sass翻译为css等功能。
强大而灵活，plugin可插拔。
其他

3 先理解下前端模块化

类似于一个公司由各个部门组成，一个工程也由各个模块组成，高内聚低耦合，各司其职。先理解一下概念：

3-1 作用域

定义：运行时变量、函数、对象可访问性
作用域决定了代码中变量和其他资源的可见性

全局作用域：

    var a = 1;
    window.a; // 1
    global.a; // 1

局部作用域：

    function a(){
        var v = 1;
    }
    window.v; // undefined

如果在传统js写法中，引入多个script，就很容易造成全局作用域冲突而导致不可预测的问题：

	<body>
    	<script scr="./moduleA.js"></sciprt>
        <script scr="./moduleB.js"></sciprt>
        <script scr="./moduleC.js"></sciprt>
    </body>

改进步骤一，使用变量作用域形成局部作用域：

	// 定义模块内的局部作用域，以moduleA为例
    var Susan = {
    	name: "susan",
        sex: "female",
        tell: function(){
        	console.log("im susan")
        }
    }

但是步骤一无法保证模块属性内部安全性，比如可能不小心改掉属性值，可以通过立即执行函数进行改写，形成闭包。
那么可以进行改进步骤二：
ps:
什么是立即执行函数？可以点击这里进行参考。
什么是自由变量？简单来说是跨作用域的变量，可以点击这里进行参考。（里面有一个句很好的知识点：创建这个函数的时候，这个函数的作用域就已经决定了，而是不是在调用的时候）

	// 定义模块内的闭包作用域（模块作用域），以moduleA为例
    var SusanModule = (function(){
        var Susan = {
        // 自由变量
    	name: "susan",
        // 自由变量
        sex: "female",
        // 只允许访问tell方法，不能访问和修改其他属性
        return {
        	tell: function(){
        		console.log("im susan")
        	}
        }
    })()

对于步骤二还有一种写法，推荐使用这种写法，也是早期模块实现的方法：

	// 定义模块内的闭包作用域（模块作用域），以moduleA为例
    (function(window){
    	var name = "susan"
        var sex = "female"
        functioon tell(){
        	console.log("im ", this.name)
        }
        window.susanModule = {tell}
    })(window)// window作为参数传给

调用验证：

	window.susanModule.tell(); //im susan

3-2 模块化的优点

模块化的封装
重用性
解除耦合

3-3 模块化方案进化史

随着模块化优势体现，开发者更倾向于使用模块化协同开发项目，于是在发展过程中形成了很多规范：AMD、COMMONJS、ES6 MODULE

3-3-1 AMD

Asynchronous Module Definition（异步模块定义）
目前很少使用

	// 求和模块
    define("getSum", ["math"], funtion(math){
    	return function (a,b){
        	log("sum:"+ math.sum(a, b))
        }
    })

3-3-1 COMMONJS

2009年出的规范，原本是为服务端的规范，后来nodejs采用commonjs模块化规范

	// 通过require函数来引用
    const math = require("./math");

    // 通过exports将其导出
    exports.getSum = function(a,b){
    	return a + b;
    }

3-3-1 ES6 MODULE

目前使用最多的便是这个

	// 通过import函数来引用
    import math from "./math";

    // 通过export将其导出
    export function sum(a, b){
    	return a + b;
    }

4 webpack的打包机制

根据import引入等关键字，将依赖文件打包成一个文件。

4-1 输出文件

输出文件的大体结构：

	(function(module) {
    	var installedModules = {};
        function __webpack_require__(moduleId){
        	// SOME CODE
        }
        // 。。。
        return __webpack_require__(0); // entry file
    })([ /* modules array */])

上述结构中的核心方法：

	function __webpack_require__(moduleId){
    	// check if module is in cache
        if(installedModules[moduleId]){
        	return installedModules[moduleId].exports;
        }
        // create a new module (and put into cache)
        var module = installedModules[moduleId] = {
        	i: moduleId,
            l: false,
            exports: {}
        };
        // exe the module func
        modules[moduleId].call{
        	module.exports,
            module,
            module.exports,
            __webpack_require__
        };
        // flag the module as loaded
        module.l = true;
        // return the exxports of the module
        return module.exports;
    }

4-2 webpack打包过程

从入口文件开始，分析整个应用的依赖树
将每个依赖模块包装起来，放到一个数组中等待调用
实现模块加载的方法，并把它放到模块执行的环境中，确保模块间可以互相调用
把执行入口文件的逻辑放在一个函数表达式中，并立即执行这个函数

5 npm

这个就省略了，npm不是重点，不做笔记了（语义化版本了解一下）

npm install过程

寻找报版本信息文件(package.json)，依照它来进行安装
查找package.json中的依赖，并检查项目中其他的版本信息文件
如果发现了新包，就更新版本信息文件

6 webpack实战

这个就不放什么说明了，视频里思路很清晰，大概在89分钟之后就是实战演练了。

7 常用插件plugins

babel

作用: 将高版本语法ES6转换为低版本语法
使用方法（直接编译）：babel -index.js --presets=@babel preset-env

preset-react：解析jsx语法

使用方法一：package.json中，加入babel配置参数

    "babel": {
    	"presets" : ["@babel/preset-env"]
    }

使用方法二：在package.json文件同目录下，设置.babelrc文件里面配置同方法一

html-webpack-plugin

具体可参考这里，主要功能是：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

8 webpack.config.js配置项解释

这部分知识点太碎了，简单的配置没进行记录，只记录了下边两个配置，其他具体的可以参考这里

是否缓存，可以提升webpack打包执行的速度，配置如下：
```
cacheDictionary: true/false;
```
.js .jsx .json文件引用时候，不需要加入后缀，只需要文件名即可，但是重名的还是需要全名，配置如下：
```
resolve: extensions：['.js','.jsx','.json']
```

9 webpack-dev-server

webpack-dev-server --open直接打开浏览器运行项目
提供文件变化监听，如果项目文件有更新，会自动打包，并刷新页面

10 webpack HRM 模块热更新（不需要刷新浏览器的情况下更新dom）

plugin中加入：webpack.HotModuleReplacementPlugin()

11 打包优化

体积优化（打包出来结果大小优化）：TerserPlugin

optimization: {
	minimizer: [new TerserPlugin({
    	// 加快构建速度
        cache:true,
        parrlel: true,// 多线程处理
        terserOptions : {
            compress: {
            	//删除掉一些没有用的代码
                unused: true,
                drop_debugger: true,
                drop_console: true,
                dead_code:true
            }
        }
    })]
}

12 webpackBundleAnalyzer 可视化webpack分析器

打包过程中会出现分析后的页面

13 happyPack

多线程打包
可以根据cpu数量构建线程池
使用thread-loader

14 tree-shaking

DCE的另一种实现方式，摇晃树，可以去掉无用的树叶
作用：例如定义了一个util，里面很多公用的方法，但是很多方法没有用到，那么在dev环境打包时候，输出文件中就可以看到很多没用到的方法声明，但是在pro环境打包时候，输出文件中就没有这些方法，消除掉这部分没用的代码。

花一上午时间、写完后心情舒畅，如有问题请随时指正，互相学习。

E-A-D-G-B-E

关注

30
点赞
踩
85

收藏

觉得还不错? 一键收藏
4
评论
webpack学习笔记：发展背景、工作机制、核心配置、性能优化

说明：根据B站学习视频：【2020新课程】Webpack从原理到实战完整版-深入浅出，简单易学，前端工程师必学经典内容！学习整理，如有错误，欢迎随时指正，互相学习。本次学习到的内容：webpack产生的背景理解前端的模块化、模块化演变的过程理解webpack打包的核心思路webpack核心：loaderwebpack核心：plugin1 webpack是什么一个现代JavaS...
复制链接

扫一扫