webpack进阶(二)

465 阅读1分钟

1. CSS前缀自动补全

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

image.png

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. 打包输出

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

image.png

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的配置啦