常见配置
自动添加前缀
效果
代码：
display:flex;
打包后的效果：
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
相关插件
使用插件
postcss-loaderautoprefixernpm install postcss-loader autoprefixer -D
相关配置
处理css(less)文件的loader配置上添加postcss-loader
{
test: /.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
"postcss-loader",
],
}
根目录下添加文件：postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
// 兼容浏览器的配置
browsers: [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions",
],
}),
],
};
px自动转化为rem
效果
源代码：
font-size: 20px;
打包后的效果代码：
font-size: 1rem;
相关插件
px2rem-loader: 将px转为rem的插件，这个是打包的时候使用，所以使用
npm install px2rem-loader -D安装lib-flexible：自动设置根节点的font-size的插件，在运行中使用，所以使用
npm install lib-flexible -S
相关配置
处理css(less)文件的loader配置上添加postcss-loader
{
test: /.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
"postcss-loader",
{
loader: "px2rem-loader",
options: {
remUnit: 20, // 1rem代表20px
remPrecesion: 8, // 保留8位小数
},
}
],
}
这个时候打包出来的代码就是rem为单位的代码了，但是lib-flexible这个插件还没有使用，这个是因为我们还需要学会打包的时候
资源内联
资源内联
意义：
代码层面
- 页面框架的初始化脚本
- 上报相关打点
- css内联避免页面闪动
请求层面
- 减少HTTP网络请求数(小图片或者字体内联（url-loader）)
插件选择
raw-loader 内联 html
${require("raw-loader!./meta.html")}`<%=require("raw-loader!./meta.html") %>
raw-loader 内联 js
<script> ${require("raw-loader!babel-loader!../node_modules/lib-flexible")}</script>
<script> <%=require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js') %> </script>
- raw-loader最好使用0.5.1的版本
- 在进行raw-loader前需要先使用babel-loader进行转化
- 新版本的
html-webpack-plugin是第二种写法css内联
借助style-loader
html-inline-css-webpack-plugin
{ test: /\.less$/, use: [ { loader:"style-loader", options: { insertAt: "top", // 样式插入到<head> singleton: true // 将所有的style标签合并成一个 } }, "css-loader", "less-loader" ] }
插件安装
raw-loader
npm install raw-loader@0.5.1 -D
