上一章节主要介绍了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，这样就会更新文件的变化。当它收到某些变化的文件，就会自动更新整个文件；
过程：通常分为两个部分：
- 启动阶段：在文件系统里面进行编译，将初始的代码通过webpack compile进行打包，然后将包好的文件传输给Bundle Server（服务器），bundle server让这个文件以server的方式，能够让浏览器访问的到。①→②→A→B；
- 开发阶段：当开发时文件发生变化，代码还是会经过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进阶篇
网友评论