webpack进阶用法总结

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

每次构建的时候不会清理目录。造成构建输出的目录output文件越来越多

 手动删除

自动删除

 

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

对css功能的增强

比如css3的

 

使用autoprefixer即可自动补全前缀

3.移动端CSS PX自动转换为rem

原始的适配方式媒体查询

那么提出了rem

利用 PX2rem将px转换为rem，这就需要知道一个rem的单位等与多少px，在页面启动的时候计算当前根元素的font-size 的值

手淘的lib-flexible可以自动的根据当前设备的宽高来计算 当前根元素的font-size的值

（步骤）:

(1)安装 ：npm install  px2rem-loader -D (转化px - rem)

(2)安装：npm install lib-flexible (计算当前设备的根元素fontsize）

(3)在webpack配置里面添加loader

remUnit表示1rem=多少px .如图即表示1rem = 75px

remPrecision 表示在px转换为rem的时候保留的 小数位数

（4）在页面的前面手动找到lib-flexible.js,把他放在入口页面的最开始，因为页面加载的时候就需要设置根元素的font-size,所以必须要放在最前面最优先执行

效果：

4.静态资源内联

资源内联就是比如把一些css，js，字体或者图片内联到html里面去

如果内联的js是写的业务脚本，就需要用到一个babel-loaer先进行转换一下，在通过raw-loader内联进来

eg:

(1)npm i [email protected] -D

(2)

5.多页面应用打包的通用方式