基础篇——webpack基础用法（三）

  上一章节主要介绍了entry、output、loaders、plugins、mode等核心概念以及简单的使用方法的介绍，接下来主要介绍文件的解析、压缩、热更新原理等。

1.解析ES6和react jsx语法

TIM截图20200717212446.png

注：es6中有许多新的js语法，webpack并不能识别这些语法，所以需要使用babel-loader插件进行解析，但是babel-loader是依赖babel的，所以需要配置preset，代码如下

TIM截图20200719090431.png

注：需要安装@babel/core、@babel/preset-env、babel-loader
npm install @babel/core @babel/preset-env babel-loader -D

TIM截图20200719092638.png

注：需要安装@babel/preset-react
npm install @babel/preset-react -D

2.解析CSS、Less和Sass

（1）解析CSS

TIM截图20200719101722.png

解析css样式要安装style-loader、css-loader
npm install style-loader css-loader -D

这里有个需要注意的地方，是style-loader为什么放在css-loader前面？
因为loader加载的时候是链式加载，执行的顺序是从右到左，所以先解析css文件，然后将解析后的css文件交给style插入到html中。

（2）解析Less和Sass

TIM截图20200719105418.png

只要字啊use里加一个less-loader即可解析less
这里已解析less为例，安装less、less-loader
npm install less less-loader -D

3.解析图片和字体

（1）解析图片

TIM截图20200719111237.png

安装file-loader
npm install file-loader -D

（2）解析字体

TIM截图20200720165042.png

（3）其他方式资源解析

安装url-loader
npm install url-loader -D

TIM截图20200720172345.png

图中的limit(字节)是设置图片的最小大小，如果图片的大小小于limit设置的值url-loader会将图片解析成base64在页面上进行展示。

TIM截图20200720181252.png

上图是自己写的demo，在search.js中引用图片资源，此示例为未使用url-loader时文件大小134kb；

TIM截图20200720181139.png

上图是自己写的demo，在search.js中引用图片资源，此示例为使用url-loader时文件大小145kb；
将图片装换成base64时，文件会变大/(ㄒoㄒ)/~~

4.webpack文件监听

TIM截图20200721160252.png

TIM截图20200721160422.png

TIM截图20200721161315.png

4.webpack中的热更新及原理分析

上一节中讲解了webpack文件监听可以实现文件的自动构建，但是每次必须手动刷新浏览器，那么有没有不用每次手动刷新浏览器，自动构建文件呢？答案是肯定的，热更新。

第一种方法：热更新：webpack-dev-server

TIM截图20200721162013.png

注意：WDS因为是放在内存中，而watch是有对系统进行文件的输出，所以在构建速度上WDS也是明显快于watch的
接下来我们实际操作一下：

（1）第一步

在package.json中添加一个dev命令，配置好webpack-dev-server;
npm i webpack-dev-server -D

TIM截图20200721162850.png

--open自动打开默认的浏览器

（2）第二步

修改webpack.config.js中的mode为development，因为production是生产环境下使用的，而development是开发环境下使用的，所以在使用WDS的情况下，要将mode修改为development；

TIM截图20200721163401.png

（3）第三步

配置HotModuleReplacementPlugin插件和devServer，因为HotModuleReplacementPlugin是webpack内置插件，所以不用额外安装的。

TIM截图20200721164024.png

接下来运行npm run dev查看运行结果

TIM截图20200721164532.png

第二种方法：热更新：使用webpack-dev-middleware

TIM截图20200722144930.png

注：通常适用express、koa等后端服务，需要引用nodejs

热更新原理分析

TIM截图20200722145227.png

webpack Compile：是webpack的编译器，将js的源代码编译成bundle.js(打包好输出的文件)；
Bundle Server：提供文件在浏览器的访问。比如说打包好的bundle.js，浏览器正常访问是以文件目录的形式访问的，而Bundle Server能够让你以服务器的方式访问，如：localhost:8080/bundle.js。
HMR Runtime：会在开发阶段的打包阶段将HMR Runtime注入到浏览器端的bundle.js中，这样浏览器端就会和服务器端建立连接，通常这个连接是webSocket，这样就会更新文件的变化。当它收到某些变化的文件，就会自动更新整个文件；
过程：通常分为两个部分：

1. 启动阶段：在文件系统里面进行编译，将初始的代码通过webpack compile进行打包，然后将包好的文件传输给Bundle Server（服务器），bundle server让这个文件以server的方式，能够让浏览器访问的到。①→②→A→B；
2. 开发阶段：当开发时文件发生变化，代码还是会经过webpack compile编译打包，编译好之后，它会将这个代码发送给HMR Server(服务端)，然后HMR Server就会知道哪些资源、文件发生了改变，然后通知HMR Runtime(客户端)哪些文件发生了变化，服务器端通知客户端通常是以json数据的格式进行传输，最后HMR Runtime就会更新代码，并刷新浏览器。①→②→③→④→⑤；
   以上就是热更新的原理。

5.文件指纹策略：chunkhash、contenthash和hash

（1）什么是文件指纹？

TIM截图20200722153619.png

优点：通常做文件版本的管理

（2）js文件指纹如何生成？

TIM截图20200722153927.png

注：一般js用Chunhash，css用Contenthash

（3）文件指纹的设置

TIM截图20200722154500.png

（4）css文件指纹的设置

TIM截图20200722154642.png

注：如果正常的情况下我们使用style-loader、css-loader的话，那么这个css会由style-loader插入到html文件的head头部，但是并没有独立的css文件，如下

TIM截图20200722161406.png

npm i mini-css-extract-plugin -D
因此我们使用MiniCssExtractPlugin这个插件，将head头部里面的css样式提取出来生成一个css文件。
该插件不能和style-loader同时使用

（5）图片的文件指纹设置

TIM截图20200722162054.png

6.HTML 、CSS和JavaScript代码压缩

TIM截图20200722164603.png

（1）js文件的压缩

TIM截图20200722164737.png

（2）css文件的压缩

TIM截图20200722164844.png

cssnano：css文件处理器
npm i optimize-css-assets-webpack-plugin cssnano -D

（3）html文件的压缩

TIM截图20200722165048.png

npm i html-webpack-plugin -D

7.总结

  到这里webpack基础篇已经讲完了，下一章节开始webpack进阶篇