First, we have to understand their role under:
postcss-loader: It is used to automatically complete the browser prefixes, how to understand it?
For example, we usually go write some of CSS3 style, for example:
#div {
transform: rotate(30deg);
}In fact, this writing, it is not comprehensive, and why, because if you really write the whole, then, it should look like this:
#div {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}But if we write it, there will be two questions:
1, much in the style of our usual projects, if each style should be so written words, not only troublesome, the file size will be much larger, and the subsequent maintenance is not good.
2, prefixes and some style, we are sure, in the end not added.
For example, -o-transform actually long been -o- do not add up, because the Opera browser kernel has long been replaced by a webkit.
The -moz-transform -moz- also do not add up, because now the mainstream Firefox browser already has begun to recognize standard written transform, so -moz- have been useless.
So this time, we need a helper autoprefixer: it contains a built-in browser-compatible form, is simply a very very full table, it will tell us something which is know which browser, this browser how much market share and so on.
autoprefixer it would decide I do not want to add this prefix, as if each were added, then such a characteristic, only a few dozen people in the world with, plus all go, no sense according to the level of market share. So it defaults to 5% of the principle, which means that if a certain characteristic, its use in the population accounted for more than 5%, it will add to this option.
So we know:
postcss-loader is designed to add browser prefixes, but it will only add a prefix own it, because it did not know what the increase, which would not suit.
So we need to tell it autoprefixer, which Canada, which did not.
At the same time, we also know that: autoprefixer not only can postcss-loader used in conjunction with any compatible browser features some related matter, can find autoprefixer.
So then, we look at, how they should write:
Based on our previous projects, the first download: npm install postcss-loader autoprefixer -D
Next, we add in src / css / main.css inside a style, move the mouse into turn 90 degrees:
Then we need to postcss-loader to add:
Why postcss-loader to add css-loader behind it?
To put it plainly, it is that before you deal with css, so I (postcss-loader) first to handle it, then I put the plus prefix are added, and then give you to deal with.
So now let's not add autoprefixer, directly translated, and look at the results:
It can be seen directly gave incorrect report, in fact, saying: postcss not find the config file.
In fact postcss need a configuration, in order to know it in the end to do according to what criteria .
So we have to create a postcss.config.js file, which it also outputs a json , and webpack.config.js as:
It is a major inside plugins, since the back belt s, it shows that there can be many plugin, it is a value corresponding to the array.
Here, then, we need to autoprefixer up.
Plus finished configuration, we recompiling
This time it is successful, we open the browser, you can see, transform and transition -webkit- have the prefix:
-Webkit- added the prefix, it means that now there are some older versions of Chrome browser exists.
While compiling a success, but now there is a problem: we have to create a separate file postcss.config.js is not too much trouble?
In fact, our loader there is another way:
use which we are now writing the string, this is actually a shorthand. It is complete wording is as follows:
Both versions are identical in fact, we can use this json format, and then recompiling to see results:
可以看到，编译成功，刷新浏览器，效果也都是一样的。
那么 json 格式里面，除了 loader 这个必填项之外，还可以加一个 options 选项，我们可以加一些自己需要的选项。
在这里我们主要就需要一个 plugins：
相信看到这里，大家已经知道要写啥了，没错，就是和 postcss.config.js 里面的一模一样。
我们的目的不就是为了，不再单独的去创建一个 config 文件吗。
我们可以把它们放到一起去实现：
然后，我们删掉 postcss.config.js 文件，并且编译：
同时，浏览器上面显示也都是正常的：
所以，我们不用再去单独的创建一个 config 文件了，而是可以把它放到 webpack 的 config 里面来，这样就会方便很多。
因为我们现在用的 postcss，autoprefixer 都是默认配置，那如果我们的项目有定制的需求，怎么做呢？
首先我们先来看看它的支持情况怎么样：npx autoprefixer --info
npx 是什么意思呢？npx 它会首先到我们项目中的 node_modules 里面去找，如果没有的话，再去全局找。
其实 npx 和 npm 是差不多的，只不过 npx 是专门用来执行一个包的，而不是用来执行 node.js 本身的那些包管理之类。
我们可以看到，有很长的一列东西展示出来了，这些就是跟 autoprefixer 相关的一些信息，比如最上面的 Browsers 就是浏览器的支持情况，At-Rules 就是支持的规则等等。
我们可以看到：transform: webkit。意思就是说，transform 是需要加一个 webkit 前缀的。
那么具体怎么配置呢？
其实还是单独的创建一个文件 .browserslistrc
它主要就是对 browserslist 做一个配置，用来告诉你，编译的过程中，我要遵循什么样的规范。
last 5 version 的意思就是：我会支持浏览器的最后 5 个版本。
> 1% 的意思就是：超过 1% 的用户，在使用某一个特性，我就来支持它。
这里面的配置都是可以根据自己的需求来定义的，并且可以写很多配置，一行一个，按照它的规则写就行了。
然后我们再重新编译：那么它就会在编译的过程中，自动的来找这个文件，并且会采用我们的这个配置文件。
然后我们就可以看到，和之前编译的结果就会有点区别了：它多出了 -ms- 和 -o- 前缀了，因为我支持的是浏览器的最后 5 个版本，以及市场占有率超过 1%，相当于我扩展了它所支持的范围。
那么这样单独的创建一个配置文件也是不太方便的，能不能和 postcss 一样，集成在一起呢？
答案是肯定的，那么放到哪里去呢？
这次我们就不放到 webpack.config.js 里面去了，我们会放到 package.json 里面：
然后我们删掉 .browserslistrc，再重新编译：
可以看到，配置还是起作用的。
那么这个具体怎么去配置，就要看我们项目中的需求如何了，如果你说需要多兼容几个版本，那么OK，但是你需要知道，它的缺点就是，编译之后的文件体积会比较大。
