进阶

自动清理构建产物

- npm i clean-webpack-plugin
- require('clean-webpack-plugin')
- new CleanWebpackPlugin()

样式前缀补齐

- postcss-loader 在rules中添加
- 在postcss-loader中配置 autoprefixer 插件

移动端 css px自动转rem

- rem：相对于根元素的字体大小，相对单位
- px：绝对单位
- 移动端适配时不必再去通过媒体查询，使用多套布局来实现
- px2rem-loader 结合 lib-flexible 库

静态资源内联

- webpack打包只能是js文件，所有的静态文件需要引入到js文件进行转换
- 但是有时我们需要在打包之前去引入静态资源来实现某些功能
- 如页面框架初始化，css文件提前加载避免页面闪动，减少http请求
- 使用raw-loader 实现html，js文件的内联。在html文件中通过${require('raw-loader!file-postion')}
- html-inline-css-webpack-plugin将打包生成的css文件插入到head标签中

多页面应用打包通用方案

- 通过glob获取到所有的entry文件
- 遍历获取到的文件，为每个入口都配置一个HtmlWebpackPlugin项