webpack进阶（二）

1. CSS前缀自动补全

为什么需要前缀自动补全呢？这是因为市场上浏览器内核不一样，为了对css3的兼容就需要补全相应的前缀。

webpack进阶（二）

1.1 安装插件

npm i postcss-loader autoprefixer -D

1.2 使用postcss-loader

1. 配置postcss-loader

{
    test: /\.less$/,
    use: [MiniCSSExtractPlugin.loader, 'css-loader', 'less-loader','postcss-loader']
},

2. 增加配置文件postcss.config.js

module.exports = {
    plugins:[
        require('autoprefixer')({
            overrideBrowserslist: ['last 2 version', '> 1%', 'ios 7']
        })
    ]
}

overrideBrowserslist数组中的值是css自动补全的一些规则，这里对最新两个版本，使用人数>1%的版本, ios7以上的版本进行自动补全。

3. 打包输出

配置完成后我们打包输出看一下效果吧~

webpack进阶（二）

2. 移动端css单位转换自适应

rem是移动端响应式布局必不可少的单位，rem是相对单位，1rem等于根节点的font-size的大小。通常我们会采用手淘的库，lib-flexible来动态的计算根元素的大小，再按比例转换将设计稿上的px单位换算成rem单位，进行样式编写，这样给我们带来了很大的计算工作量，webpack也给我们提供了自动将px转换成rem的loader——px2rem-loader.

2.1 安装插件

npm i lib-flexible -S
npm i px2rem-loader -D

2.2 配置px2rem-loader

{
    test: /\.less$/,
    use: [MiniCSSExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader', {
        loader: 'px2rem-loader',
        options: {
            remUnit: 75,  // rem相对px转换的单位, 1rem = 75px 
            remPrecision: 8  //精度,后面小数点的位数
        }
    }]
},

2.3 将lib-flexible内联到html中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <script>
        <%=require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')%>
    </script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

这样我就完成了移动端CSS px自动转换成rem的配置啦

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。