webpack傻瓜式入门教程-05

前言

  上篇教程我们从头到尾走了一边流程，就算对于小白，其实也能够很快掌握webpack的基本用法，在今天这篇教程中，我们将讲解两个新东西，它就是“postcss-loader”，"autoprefixer"，他们两个到底有什么用呢？请往下看。

目录

https://www.jianshu.com/p/9c9b555b52e8

问题描述

对于没有用webstorm的前端小伙伴们，一定有这么个问题，就是css hark，我们来看看一般代码和兼容代码的写法：

一般情况：

article{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: skyblue;
}

问题：

  这段代码看似没有问题，但是在不同的浏览器环境下，会导致样式失效，为什么呢？因为浏览器内核不一样，这就是css hark，那么我们怎么解决css hark呢？往下继续看！

兼容情况：

article{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: skyblue;
}

问题：

   会使用webstorm的小伙伴，应该都可以做到写这些需要兼容性代码的时候用tab键，来一次性完成这些厂商前缀，但是如果你是全靠手写这些厂商前缀的，那真是个不爽的体验，严重影响了我写代码的乐趣呀。那么这个时候，我们本节课的要点就来了，请往下看。

postcss-loader / autoprefixer 自动补齐厂商前缀！

步骤：

1. 安装postcss-loader和autoprefixer;

2. 配置webpack.config.js:

module: {
        rules: [
            {
                test: /\.less$/,
                exclude: /node-modules/,
                include: path.resolve(__dirname, "src/style/"),
                loaders: ['style-loader', 'css-loader', 'postcss-loader' ,'less-loader']
            }
        ]
    }

解析：

为什么postcss-loader要放在css-loader和less-loader之间？

答： 根据官方解释，loaders中的执行顺序是从右往左，也就是说，在这里，我们的less文件的解析顺序是： less-loader => postcss-loader => css-loader => style-loader。到这里相信聪明的小伙伴已经明白了，less-loader解析完less文件后，那么这个时候就该开始为需要兼容的代码加上厂商前缀了，加了之后然后css-loader来解析检查，然后最后style-loader执行将代码扔在head里面。

注意：

less和sass使用方法都是一致的，没什么区别。

3. 创建并且配置postcss.config.js文件

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: 'last 5 version' // 代表意思为每个主流浏览器的最后5个版本
        }
    }
}

关于browsers的配置如下：

代码	含义
last 2 versions	每一个主流浏览器的最后5个版本
last 2 Chrome versions	谷歌浏览器的最后两个版本
> 5%	市场占有量大于5%
> 5% in US	美国市场占有量大于5%
ie 6-8	ie浏览器6-8
Firefox > 20	火狐版本>20
Firefox >= 20	火狐版本>=20
Firefox < 20	火狐<20
Firefox <= 20	火狐<=20
iOS 7	指定IOS 7浏览器

4. 创建一个less文件，内容如下：

article{
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: skyblue;

5. 运行webpack看看编译后的效果：
   页面效果图

  大家可以看到我们写代码的时候并没有写前缀，但是经过使用postcss-loader和autoprefixer之后，每次编译之后都会给该加前缀的属性上加上前缀，这样子我们就可以愉快的写css代码了，而不用考虑哪些属性要写前缀了！

注意事项

  如果仅仅使用css文件，并没有使用预处理的less或者sass，那么在css文件中通过@import引入的css文件将不会被处理，例子如下：
a.css

@import "./b.css";
body{
  background: skyblue;
}

b.css

#article{
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(50%, 50%);
  width: 200px;
  height: 200px;
  background: #ccc;
}

如果这样引入的css文件无效怎么办？

答：如果是这样的话，就修改一下关于webpack.config.js中关于css配置，如下所示：

{
  test: /\.less$/,
  exclude: /node-modules/,
  include: path.resolve(__dirname, "src/style/"),
  loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
}                

解析：importLoaders=1 什么意思？

答： 在css-loader后面添加一个?importLoaders=1，代表的意思就是给css-loader传入了一个参数，告诉它，如果有@import引入的css文件，也要按照css-loader后面的1个loader解析，这里也就指的是postcss-loader，所以这样配置后，@import的文件也可以正常被postcss-loader解析了。

后言

本节教程讲的东西就两个：postcss-loader，autoprefixer；

对于使用webstorm的小伙伴来说，写代码的时候一般不会自己手动输完属性名称，所以一般有属性需要兼容了，那么webstorm就已经帮我们处理好了厂商前缀，如下图所示，这时候只需要一个tab键，就能自动变成我们需要的代码，如下所示：

按下tab键
变成这个样子了，然后输入一个属性值看看
只要输入东西，就会发现其他行的兼容代码也在自动补全你写的代码

结论： webstorm自身就有补齐的功能，是否postcss-loader / autoprefixer 就没用呢？

答案： 当然不是！为什么呢，因为代码中出现厂商的前缀，其实对于代码来说，倒是无所谓，但是对于人工维护来说，其实不是特别好的，因为代码很繁杂了已经，所以我们最好的处理方式就是手写代码的时候不加前缀，让postcss-loader和autoprefixer来编译帮我们加上，这样子对于我们检查代码，维护代码来说更加清晰。so，还是好好的用postcss-loader和autoprefixer吧，哈哈哈哈，如果能从文章开头看到这里，说明你真的是需要掌握这个技能，那么就请给一个赞吧~谢谢！

说明

原创作品，禁止转载和伪原创，违者必究！