Webpack 学这篇就够了，入门到上线优化

模块打包工具的由来

ESM存在兼容问题（主流浏览器解决了）

模块打包工具概要

可以通过webpack把零散的文件打包到一个js中，通过下面这个进行代码兼容处理（转ES5）

可以根据我们意愿进行拆分打包，把想打包到一起的文件组织起来，形成一个程序运行时所需的文件，后面需要的文件，用户点击后再加载，这样就可以渐进式加载，不会导致文件过碎或过大

Webpack 快速上手

可对前端所以资源进行模块化。

yarn init --yes
yarn add webpack webpack-cli --dev

yarn webpack 进行打包，会先从src index.js打包

Webpack 配置文件

webpack4后支持零配置启动打包。默认src/index.js为打包入口

如何自定义路径
根目录传教webpack.config.js文件（这个文件运行在node环境需要安装COMJS方式编写代码）

Webpack 工作模式

这个模式大大减少了webpack的使用复杂度，可以理解为 针对不同环境的几组预设配置。
如果用默认的生产模式，打包后的结果无法查看源码

开发模式的代码

mode none

主要就这三种工作模式
配置中指定

Webpack 打包结果运行原理

本次演示mode none进行打包，这样就可以看到最原始的代码



打开浏览器调试看运行过程

接受到俩个对应的模块函数

单步调试往下走

跳过一些不重要的 一直到

加载这个函数，先判断require有没有被加载过，如果有就缓存里读，没有就创建新对象

调用函数

其实打包过后的代码不会很复杂
只是把我们的模块放到了同一个文件中。

Webpack 资源模块加载

可以打包任意资源，这里css为立，运行后报错，因为还没安装css-loader

webpack默认只解析js代码，所以编译对应的代表需要loader 例如css-loader

yarn add css-loader --dev
配置

这时打开网页并没有效果，其实是webpack打包了 但是还没有使用，需要安装另一个loader
这个的作用就是把转换后的结果 通过style标签的形式追加到页面上
yarn add style-loader --dev
配置 这里注意，配置了多个loader 执行顺序是从后往前 就是下面的先执行

Webpack 导入资源模块

打包入口=启动入口


入口还是js，css在文件中import即可

规范上 css和js应该单独写，为什么webpack建议我们import呢? 因为

webpack的思想哲学，用到的地方就得导入

Webpack 文件资源加载器

yarn add file-loader --dev
配置

运行服务器后发现找不到图片，因为webpack默认打包后的文件在根目录，我们可以通过配置告诉webpack打包后的文件在那



入口函数中发现

运行服务器，可以显示了


找到对应loader 任何拷贝文件到对应目录

Webpack URL 加载器

除了拷贝处理物理文件外，还有通过dataurl表示的方法也非常主流，
dataUrls是一种特殊的协议，可以用url表示一个文件
使用这种的话就不需要发生http请求。

示例

浏览器输出上面的 data:text/htm;charset=UTF-8,

html contete

图片

这样就可以用dataulrs表示任何文件了

yarn add url-loader --dev
配置

运行后就不生产图片文件了

此时bundel中导出的不是图片路径 而是url

适合小文件不然过大影响速度

可以通过配置上面的用法

注意，file-loader一定要安装，因为超过10kb就会调用file-loader
不然报错

Webpack 常用加载器分类

转换成js


拷贝到文件目录，并且导出

对加载的文件进行校验

Webpack 与 ES 2015

但并不转换ES5语法

需要配置loader yarn add babel-loader @babel/core @babel/preset-env --dev

配置后会替换默认的处理器

yarn webpack后 发现新特新还是没有被转换
之前也说过，babel只是个平台，转换需要特定的插件

打包后就被成功转换了

总结

Webpack 加载资源的方式

除了import webpack还提供了其他几种方式
ESM

COMSJ

AMD


统一使用一个标准就行，不要多种都用

Webpack 加载资源的方式

除了代码中的import能触发加载，还提供了以下其他几种
1

2
comjs中默认导出 需要在require后加上default

3

除非必要，项目中千万不要混着用。

---

cssloader中

html的loader 也会触发相应的加载

---

例如在入口文件引入main.css，main.css中 background-image中引用了url，那么cssloader会进行资源模块处理，然后根据配置文件找打相应的loader（找到urlloader）

import 也可以触发资源文件加载
新建reset.css
导入

---

html中加载资源文件的方式
新建footer.html

main.js中引入，这样才能参与webpack打包过程，html文件会默认字符串形式导出
所以要输出到页面

3 配置htmlloader
安装
配置

yarn webpack
正常显示

注意
href属性不触发打包
点击a标签报404找不到（因为htmlloader只会默认处理 img中src属性）

如果其他属性也要出发打包的话需要配置

yarn webpack 后 可以看到参加了资源的打包

ok 显示了

---

所有需要引入资源的地方webpack都会找出来，然后用对应的loader处理，然后输出到（输出目录）代码中，这就是webpack的工作过程，去实现的模块化。

Webpack 核心工作原理

webpack会找到其中文件作为打包入口

然后根据代码中的 import 或require的语句解析 推断出来依赖模块，然后解析每个模块的资源依赖，形成依赖树

然后递归依赖树，找到每个节点对应的资源文件，然后根据每个模块的rules属性找到对应的加载器，然后进行加载，把加载的结果放入bundle.js

Webpack 开发一个 Loader

markdown-loader,可以在代码中直接导入md文件，一般md文件被解析为html文件后呈现页面上，

开始

重点：

这里yarn webpack后 找到入口文件main.js 根据import的导入，根据rules中配置的/md$/ 加载到md文件 然后进行自定义处理，这个时候在控制台上打印的文件输入源处理好后返回；

注意这里报了错了

因为loader管道需要最终返回js的代码

修改前

修改后

改成这个打包就不会报错了

找到这些过后，接着开发，先安装 yarn add markd --dev
导入 使用

EMS也可以

继续改进 yarn add html-loader --dev
配置

Webpack 插件机制介绍

另一个webpack核心能力

Webpack 自动清除输出目录插件

webpack每次打包只会覆盖同名的文件，这样会越积越多
yarn add clean-webpack-plugins --dev

导入

配置
这里都是导出一个类型，先创建一个类型

打包后 之前的文件都不在了 只有刚刚打包的文件，非常干净

Webpack 自动生成HTML插件（上）

还有个常用的需求就是使用生成后的html，
之前都是硬编码的方式存在根目录下，这样有俩个问题1.项目发布时需要同时发布根目录下的html和dist目录下所有打包结果 这样麻烦.上线后还要确保路径正确
2.输出的文件或路径发生改变，那么html中的script的路径也要修改

解决方法，就是用webpack自动生成，一起输出到dist目录，这样只需要部署dist目录就可以了，index html中的bundlejs也是动态的，这样就不会出现硬编码那样的问题

配置模块
yarn add html-webpack-plugin --dev

添加实例对象

yarn webpack 发现报错 排错发现 babel和html这个插件不能一起用，去掉babel

成功输出

自动生成html

注意把下面这个注释掉，这个是之前试特性的时候改的，现在index直接输出到dist就不需要了

这样 以后就不需要html文件了 以后都是自动生成出来的

Webpack 自动生成HTML插件（中）

继续改进
1标题修改 2 修改标签和dom结构
通过插件参数配置

这个方案只适合小范围改动，如果数据较多 建议模板配置
创建新indexhtml我模板

配置

Webpack 自动生成HTML插件（下）

创建新实例就行了



生成俩个

Webpack 插件使用总结

不需要构建的静态文件，例如网站图标
先安装插件 yarn add copy-webpack-plugin --dev
导入

配置
传入数组 需要拷贝的路径（把public拷贝到输出目录）


适用任何类型项目，无论是否使用框架都可以用

Webpack 开发一个插件

钩子，类似web的事件，为了便于插件扩展，webpack在每个环节都设置了钩子，这样就可以在每一个环节挂载任务，扩展webpack能力

尝试在钩子挂载任务
这个任务必须

写一个删除bundle内的注释插件
去官方文档找到这个，意思是在输出文件前执行

第一个参数 插件名 第二个是挂载的函数


配置

获取内容


判断是否是js文件
大概思路就是写一个类 类里面用webpack生命周期拿到文件数据，然后进行处理后输出，这里是拿到输出文件，然后处理再输出

总结

Webpack 开发体验问题

还是需要手动打包 运行刷新，这样效率比较慢
方案：
1 文件以http服务器运行
2 自动编译+自动运行
3 有sourcemap 方便调试
下面开始介绍

Webpack 自动编译

cli不会变化，等待源文件改变进行重新编译

Webpack 自动刷新浏览器

用这个实现

弊端1 同时使用俩个工具 麻烦了 2 效率低了，webpack编译后写入磁盘，服务器从磁盘读取

Webpack Dev Server

官方推出的


yarn add webpack-dev-server --dev

会自动编译，但是为了效率，并没有输出dist目录

因为结果暂时在内存中，而且这个serve是从内存读这个文件的，然后发送浏览器，这样就大大提高构建效率。

打开浏览器

这里有坑 报错了

把webpack版本改4就行了
解决

改完后记得yarn一下

运行成功

此时发现 输出目录下确实没文件了

Webpack Dev Server 静态资源访问

只要是webpack打包的文件都可以被正常访问到，如果其他静态资源也需要被访问，那么webpack serve需要配置
为什么需要这样配置？ 因为平常开发不会使用

所以资源文件不会被拷贝到pub目录，只有上线前才用这个插件，平常开发如果拷贝得多，效率就低下了，
所以这里解决了 开发时及时不拷贝到dist目录静态资源文件也能访问到

pub目录中的ico

Webpack Dev Server 代理 API

我们的开发项目一般运行localhost：8080 但后端的接口部署在同源地址下，生产环境没问题，但是本地就不行了

不是任何情况后端都支持跨域

proxy是一个对象，每个属性都是代理规则

上面的changeOrigin，可以看看http

此时就被代理到了 git的用户接口了

Source Map（源代码地图） 介绍

很难定位问题


sourcemap文件

核心属性 mapping
转换后的字符和转换前的映射关系
反编译，在源文件最后添加

打开浏览器后，如果发现有这个行就会自动请求这个source文件，然后逆向解析
此时这个 jqurey.min.js就是源码了

Webpack 配置 Source Map

简单使用，但是多模式可能比较懵。

bundle里也自动加上了 这行

打开服务器，此时发现报错，然后就可以根据log的提示找到对应位置了

开启前，点击报错行进去后是bundlejs

开启后，点击报错行进去后是源码

但是这么简单配置在效率上还是不够的

下面介绍

Webpack eval 模式的 Source Map

模式差异

eval这个函数会运行在虚拟机中 vm

加 sourcemap 注解后

其实还是运行在虚拟机，只是有了执行环境名称
配置 webpack config

打开服务器

但这个文件是打包过后的代码

因为这个模式下 所打包的代码都是用eval函数去执行并且后面还加了 source文件路径

这样浏览器去执行的时候就知道对应的源代码了，但是不会生成sourcemap文件，也就是和sourcemap没关系，构建速度最快，但效果简单，只定位名称

Webpack devtool 模式对比（上）

为了对比 创建新项目并进行不同模式下打包结果对比。

故意报错

1 配置webpack，这里是所有模式

2 webpack配置对象，里面可以是数组，对应着单独打包配置，这样就可以一次执行多个打包任务


3 注释配置对象
配置 遍历数组，为每种模式配置打包对象，这样一次打包可以生产所有模式结果，这样试验起来快。
配置mode：‘none’这样webpack就不会进行额外的处理，配置babelloader是为了方便辨别差异，配置plugin是为了为每一个js配置一个html文件

然后通过服务器运行

Webpack devtool 模式对比（下）

evel模式

之前说过了，用eval执行代码，用soursemap标记路径，没有生产sourcemap文件 只能定位到文件

eval-source-map模式

上面差不多 但可以定位到行和列，并生成了sourcemap

cheap-eval-source-map

阉割版sourcemap，这种模式下的sourcemap只能定位到行 没有列信息，少了点效果但是生成速度快了

cheap-module-eval-source-map 模式

上面的模式上多了 module，咋一看也只能定位到行，但仔细对比，cheap-module和源码一样定位 cheap是es转换后的结果

这就是单独配loader的原因，module不需要加工，输出手写的源码，不带module是加工后的结果。
了解这几种后基本都算了解了 剩下的都是继续组合罢了

inline-source-map

这个生成的sourcemap是以dataurl的形式，这个模式一般不用，因为体积太大了

hidden-source-map

这个模式下是看不到sourcemap的效果的
，但生成了文件，这个主要第三方包使用

nosorces-source-map

这个可以记一下

这个模式下能看到哪行出问题，但点进去看不到源码。这个主要用于生成环境保护源代码不被暴露。

Webpack 选择 Source Map 模式

开发模式下用这个

1要求每行代码不超过80字符，因为定位到行就够了
2使用框架多所有loader转换后代码和未转换的区别差异大（我们需要调试转换前的）
3首次打包慢但是重写打包相对快

生产模式下用这个，不生成sourcemap，有点技术的人都可以复原绝大多数项目源码


而且调错都是开发阶段是事情。
如果实在对自己代码没信心可以用 nosources-source-map模式 这样就可以控制台中找到源码对应位置，但不暴露源码内容

总结 没有绝对，选择适合的模式

Webpack 自动刷新的问题

例如 在编辑器输入内容 然后再调节css，这样就会被刷没了

办法


更优解决方案


下面介绍

Webpack HMR 体验

热拔插，但不影响设备运行，例如电脑的usb，模块热替换也是这个道理

问题


自动刷新和热替换差异体验
开启HMR特效（下面介绍怎么开启）

js文件测试

非文本也可以，例如图片

Webpack 开启 HMR

启动
yarn webpack-dev-server --hot



启动
配置后发现没有效果 css有效果，可以热替换， 但js没效果还是被刷新了
下面介绍实现所有模块热替换

Webpack HMR 的疑问

还需要额外操作

为什么样式文件可以？ 答：因为样式文件经过loader处理，只有css也是因为 loader处理后的css会及时替换到html页面中，而js是没有规律的，可能导出对象或字符串，没有规律webpcak无法提供通用方案，这就是js为什么不行了。

用框架开发的可以自动js热替换，因为

有些脚手架也集成了hmr

Webpack 使用 HMR API

在js文件中使用

然后修改editor.js

运行，成功，没有被刷新

Webpack 处理 JS 模块热替换

修改editor.js
运行

上面的图可以看到，修改editor文件后，打印出来的是accept里面的log信息，这里拿到的函数已经是修改后最新的，只需替换掉旧代码即可。

是因为 替换的时候把之前的元素移除了

优化，先保留状态，替换后再放回去


注意，本次不是通用的方式，只是这里演示下 替换。

Webpack 处理图片模块热替换

注册模块 热替换的处理函数

这里编辑了文件就会触发
点击文件编辑 修改保存

热替换成功

Webpack HMR 注意事项

而且刷新后 错误信息已经被清除了，这样就难以排错，解决方案：hotonly
改配置或 yarn webpack-dev-server --hotOnly

这样错误信息就被显示了

无论是否处理了热替换，浏览器都不会被自动刷新，

问题2


没有开启 自然没有这个对象了

可以先判断后使用就解决了

问题3

答案不影响，打包会自动移除
测试 运行webpack打包
查看 bundel。js中的mianjs

这些代码被移除了

Webpack 生产环境优化

webpack自带开发 生成环境配置。

Webpack 不同环境下的配置

有俩种方法

• 第一种
  第一个参数 环境名参数 第二个参数 传递的参数
  

运行 webpack 不带参数


传参

也可以全局判断环境变量，导出不同配置

Webpack 不同环境的配置文件

上面介绍的只适合中小型项目，大型复杂项目建议用 不同环境对应不同配置文件，一般有三个webpack配置文件，2个适配不同环境，1公共配置（公共负责抽出一样的信息）。
根目录创建 webpack文件 三个

导入公共对象

这里的assign不合适，assign会覆盖前一个对象的属性，这里的plugin数组会被覆盖（我们是希望在公共配置基础上添加插件），可以换成loadsh中的merge，最好用webpackmerge

载入模块，使用

这里没有设置默认webpack的文件 运行时要指定文件

Webpack DefinePlugin

webpack4 自动集成了很多优化的对象，这对新手来说开箱即用非常方便，但会导致忽略很多东西，这样导致报错了就无从下手，本次介绍怎么去研究背后的作用，这次主要研究几个优化的配置。

• DefinePlugin
  为代码注入全局成员，production模式下默认启用，并且往代码中注入下面这个 常量
  
  很多第三方的模块都是通过这个成员去判断运行环境。

使用
导入 添加模块

运行

找到打包结果

虽然传的是字符串 但这里没有显示双引号

用字面量语句

变成了预期的样子了

小技巧：如果是注入是一个值的话 用json stringify，这样就不对错了

Webpack 体验 Tree Shaking

每个模拟一个组件



也就是未引用的代码没有输出（tree-shaking 生成模式下自动开启）。

Webpack 使用 Tree Shaking

其他模式下开启

只输出导出使用了的成员 这里少了俩个


继续添加选项

再次打包发现，没有引用的代码被移除了

Webpack 合并模块

除了 useexports外，还可以用下面这个继续优化

配置，为了看效果 先把minimize关了

此时就不是一个函数对应一个模块了，而是放在同一函数中

作用就是


这个特效也叫 scope hoisting 作用域提升，此时配合minimize 体积又会减少很多。

Webpack Tree Shaking 与 Babel

使用babel loader 可能会导致 tree-shaking失效。


为了转换新特新，都会使用babel loader 去转换最后webpack将所有loader处理后的结果打包到一起，
但是 babelloader转换时可能会把ESM转换成COMJS

这个主要还是取决是否使用了babel插件，下面在就有

转换后都变成了COMJS，所有tree-shaking不生效的原因。
为了试验 这次只开启

yarn webpack
usedexports正常工作了

也就是说，tree-shaking没有失效， 这是因为新版的babel中自动取消了COMJS转换

也可以自己手动关闭
preset的配置比较特殊 需要注意一下
先试试强转

此时发现 userexports就没生效了

所有即使开启压缩代码，tree-shaking也无法工作

关了就可以让tree-shaking就正常工作了，因为esm不进行转换了

Webpack sideEffects

通过配置，表示代码是否有副作用，给tree-shaking提供更大压缩空间。

一般开发npm模块才用到

例如



Webpack sideEffects 就可以解决这类问题
开启，注意 production模式下也自动开启
打包时会检查这个代码的package.json中是否有sideEffects标识

package.json中表示这个代码是没有副作用的，如果没有副作用，那么这些模块就不会被打包

没有副作用就会被移除掉

运行 webpack 发现没有用到的模块没有被打包进来

Webpack sideEffects 注意

使用前提

否则会误删有副作用的代码

示例

index中导入

css也有这种问题
解决： package中关掉副作用，2或标识那些文件是有副作用的
那么webpack就不会忽略有副作用的文件了

运行后发现副作用的代码也被打包进来了

Webpack 代码分割

前端工程化的优势很明显，但存在弊端

如果项目大，复杂 那么会导致

但，项目启动的时候

，但这些模块又被打包在一起，而且我们应用又在浏览器运行，这样很浪费流量和带宽

合理方案：合理根据规则打包到多个bundle中
然后按需加载这些模块，这样就可以大大加大运行速度和效率

虽然一开始说的是 webpack把零散的文件合并到一起提升效率，这里不矛盾，只是物极必反。

例如运行一个小小的功能时需要加载很多模块，而且目前主流的http1.1协议中本来就很多缺陷

• 1.同域下不能发送很多并行请求
• 2.每次请求都有一定延迟
• 3.每次请求传输具体的内容外，还有额外的请求和响应header等浪费带宽流量。

目前分包分为两种

• 1配置多个输出文件
• 2.按需加载
  下面开始介绍

Webpack 多入口打包

适用多页面应用

2，公共部分单独提前到公共结果中。
适用，例如这个项目俩个页面

公共样式和公共模块请求方法

配置多个打包入口

运行 输出了俩个

但有个小问题，hmtl文件把俩个js文件都载入了

继续改配置文件，指定输出的html的bundle

运行 发现正常了

Webpack 提取公共模块

多入口打包简单易用，但有些小问题

这就会导致不同的打包结果中有相同的文件出现

这个项目小影响不但，但是vue或者jq这些框架下 影响会很大。

配置webpack文件

yarn webpack

Webpack 动态导入

按需加载是非常常见的需求，这里的按需加载是

从而极大减少带宽流量，webpack中通过动态导入实现按需加载，而且

例如本项目 有文章列表和相册列表，现在这个还是静态，用户进来就全部加载了

动态导入，通过import方法实现
通过结构 拿到默认导出

回到浏览器，此时页面也是能正常工作的
单应用开发框架 react和vue里路由映射组件 就是通过动态导入的方式 实现按需加载

• 未动态导入前-700行
• 
• 动态导入后-分了俩个文件，bundle体积小了很多只有200多行，其他的500多行被分到了components
• 
  

Webpack 魔法注释

默认通过动态导入产生的bundle文件，名称默认是一个序号，如果想自定义命名可以用这个
import方法多加一个参数，注意没逗号分隔

yarn webpack

如果命名一样 会打包到一起

Webpack MiniCssExtractPlugin

从打包结果中提取，实现css模块按需加载
yarn add mini-css-extract-plugin --dev
安装
导入
配置

yarn webpack

css超过150kb才使用这个插件比较好，否则嵌入代码中 比请求一次效果更好

Webpack OptimizeCssAssetsWebpackPlugin

刚刚的插件使用后是有点小问题的，我们运行生成模式 yarn webpack --mode production
发现生成的样式文件没有被压缩 js是正常压缩了

css没有

因为webpack内置插件只针对js压缩，对其他资源压缩 需要其他插件，可以用下面这个插件
yarn add optimize-css-assets-webpack-plugin --dev


导入 配置

yarn webpack --mode production 压缩成功

这里有注意的点，文档中配置 这个插件是在optimization的minimizer属性中，因为如果把这个插件配置到plugin数组中，那么这个插件任何情况都会工作，配置到minimizer中只会在minimizer开启才会工作，所以webpack建议 压缩类插件最好配置在minimizer中，便于minimizer统一控制，如果没开启，这个插件就不工作

yarn webpack

反之 生成模式打包就会自动开启，但这时js却没被压缩，就只有css文件被压缩，是因为设置了minimizer，如果设置了webpack就认为，是需要去自定义所使用的压缩器插件，那么内部的压缩插件就被覆盖掉，所以这里要手动add回来

yarn webpack --mode production
css压缩了

原本压缩的js 现在没压缩

安装回内部压缩插件
yarn add terser-webpack-plugin --dev

导入配置

1 yarn webpack --mode production 后 发现报错了 下载的TerserWebpackPlugin这个是5版本的 把版本降到4后 yarn 一下

2 yarn webpack --mode production 一切正常

Webpack 输出文件名 Hash

一般部署前端资源文件时都会开启服务器静态资源缓存，
这里有个小小问题，如果缓存策略失效时间过短的话，效果不明显，过长的话文件修改了又没办法及时更新到客户端，
为了解决这个问题，生产模式下给文件添加hash值，这样全新的文件名就是全新的文件，这样就不会有缓存问题了

提供了三种hash
1 项目级别的，任何一个文件发生变化，hash打包的值也会变化

2 chunkhash ，单文件
chunk级别 只要是同一路的打包 chunkhash都是相同的

样式文件是代码中提取出来的，所有说不是单独的chunk

3contenthash 文件级别的hash 根据输出文件的内容生成的hash，也就是不同的文件就有不同的hash值

相比其他 chunks是解决缓存问题最好的方式，因为精确定位到了文件级别的hash，只有文件变化才发生hash变化

如果觉得名字太长可以用：指定长度 [hash:8]

完