进阶篇——webpack进阶用法（一）

  上一章节主要介绍了webpack的基础用法，这一章节我们进一步学习webpack的进阶用法，能够更加加深对webpack的理解，增强css解析、代码分割、代码打包、打包组件...

1.课程目录

TIM截图20200724094110.png

2.自动清理构建目录产物

（1）历史遗留问题

上一章节中我们在构建的时候，我们没有通过webpack自动的去清理构建目录，而是每次手动的去清理，显得很是浪费时间

微信截图_20200801202720.png

（2）解决方法

1. 通过npm命令手动去清理，如下：

   
   微信截图_20200801202908.png
   

   注：这样显得代码不够优雅，每次构建之前都要手动输入以上命令，很是繁琐。有没有自动清理的方法呢？如下

2. 安装clean-webpack-plugin
   微信截图_20200801203201.png
   安装
   npm i clean-webpack-plugin -D
   没使用该插件前
   微信截图_20200801210206.png
   我们可以发现，index.js和search.js每次构建时，都会重复生成文件，造成dist文件的内容过大。
   使用该插件后，如下
   微信截图_20200801213231.png

3.PostCSS插件autoprefixer自动补齐CSS3前缀

目前市面上有各种各样的浏览器，各大厂商对css的兼容处理也是不尽相同，因此为了使css的属性能够兼容各大浏览，出现了各种css前缀，目前主流的浏览器如下（包含css前缀）

微信截图_20200802153023.png
例子如下
微信截图_20200802153202.png
通过上面的例子我们可以看出，当我们编写css样的时候，需要手动不全前缀，这样做是非常浪费时间的，有没有我们在开发时正常编写css样式，在构建项目的时候，代码能够自动帮我们补全css样式的前缀呢？答案是有的，如下
微信截图_20200802153552.png
autoprfixer是css样式的后置处理器，与less-loader、sass-loader不同，它们是css的预处理器。
预处理器：一般是在webpack打包前处理文件，如less-loader、sass-loader是在webpack打包css样式前，将less文件、sass文件通过预处理器转换css文件，再进行打包处理。
后置处理器：是webpack在将css打包后，再对文件处理，如autoprefixer是将打包好的css文件进行css样式前缀添加。
browsers: ["last 2 version", "> 1%", "iOS 7"]：含义是兼容到最近的2个版本且使用人数大于1%且最低版本是IOS7的浏览器。
使用autoprefixer之前，构建的结果如下
微信截图_20200802154933.png
可以看到display属性并没有补全。
接下来我们来看一下使用autoprfixer插件看一下
npm install postcss-loader autoprefixer -D
注：autoprefixer一般和postcss-loader一起配合使用
微信图片_20200802160815.png
可以看到，这个插件已经帮我们做了自动补齐

4.移动端CSS px自动装换成rem

我们知道现在市面上的移动端是百花齐放，各种分辨率都有，为了能够使前端项目能够兼容各个版本的浏览器，我们需要将px转换成rem。我们先来看一张以IOS为例浏览器分辨率的图，如下：

QQ截图20200806212514.png

那如何做浏览器的适配呢？

（1）第一种方法：媒体查询

QQ截图20200806212757.png
缺点：需要些多套适配样式代码，造成项目体积的冗余，运行速度过慢，在这里不推荐使用媒体查询。

（2）第二种方法：rem

css3出来之后，提出了一个rem单位，含义如下

QQ截图20200806214854.png
推荐使用该方法。使用方法如下
QQ截图20200806215037.png
npm install px2rem-loader -D
npm install lib-flexible -S
remUnit：rem相对于px的一个单位，这里75表示，1rem=75px;
remPrecision：表示px转换rem时，保留小数点的位数，这里的8表示保留小数点后8位。
结果如下
QQ截图20200806220331.png

5.静态资源内联

QQ截图20200809164104.png

（1）HTML、JS内联

QQ截图20200809171113.png

注：使用raw-loader内联JS时，可能js代码里面会有ES6语法，这时候就要先用babel-loader进行代码转换，再使用raw-loader内联js

（2）CSS内联

我们在讲css文件指纹的时候，使用MiniCssExtractPlugin(不能和style-loader一起使用)将css样式代码提取了出来，并且给css文件添加了指纹策略。现在我们来说另外两种方法。如下

QQ截图20200809174724.png
npm install raw-loader@0.5.1 -D