CSS前缀：由于浏览器众多，各大浏览器的标准不统一，因此需要兼容不同的浏览器。
www.caniuse.com可以查询浏览器对CSS属性的支持情况
.box{
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px
border-radius:10px
}
autoprefixer插件后置处理（less/sass是打包前的预处理器）
1. npm i postcss-loader autoprefixer -D
2. 修改配置文件
使用插件前：
使用插件后：
分辨率转换px -> rem / px2rem-loader
px是绝对单位，rem是相对单位
1. npm i px2rem-loader -D
2. npm i lib-flexible -S
3. 配置
测试结果：
4. <script></script>引入lib-flexible代码
5. 输入命令npm run build
6.效果：
代码资源的内联
上方第四步引入lib代码的时候是手动导入的，这样很麻烦，因此要使用资源内联loader
资源内联的意义：
1. 页面框架的初始化脚本：如页面根元素font-size大小
2.上报相关打点：css初始化，加载完成，js初始化，加载完成要内联在页面中，
3.CSS 内联避免页面闪动，
请求层面：减少http网络请求 性能优化
1.小图片或者字体内联(url-loader)
注意：由于html-webpack-plugin解析语法改变将${ "code" }写法改为了<%= "code" %>
出处：blog.csdn.net/weixin_4371…
html内联：row-loader <script>${require(‘raw-loader!babel-loader!./meta.html’)}</script>
更正后<script><%=require(‘raw-loader!babel-loader!./meta.html’)%></script>
meta.html模板 每个页面都需要使用这个meta片段
1. npm i raw-loader@0.5.1 -D
JS内联：<script>${require(‘raw-loader!babel-loader!../node_modules/lib-flexible’)}</script>
更正后<%=require(‘raw-loader!babel-loader!../node_modules/lib-flexible’)}%>
babel-loader是为了转译ES6
使用0.5的版本
css内联：方案一. style-loader，把所有css代码结合成一个标签
方案二：html-inline-css-webpack-plugin：适用于chunk打包，将打包的代码插入到页面对应位置
