常见配置

自动添加前缀

效果

代码：
display:flex;

打包后的效果：
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

相关插件

使用插件postcss-loader autoprefixer

npm 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

  1. ${require("raw-loader!./meta.html")}

  2. `<%=require("raw-loader!./meta.html") %>

raw-loader 内联 js

  1. <script> ${require("raw-loader!babel-loader!../node_modules/lib-flexible")}</script>

  2. <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内联

  1. 借助style-loader

  2. 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