样式处理——PostCSS
什么是 PostCSS
PostCSS 就是一个用 JavaScript 转换 CSS 的工具。
PostCSS 具有以下特点，但是不局限于以下列举的特点：
- 提高代码的可读性
- 使用 CSS 的未来特性
- 终结全局 CSS
- 在 CSS 避免出现错误
- 强大的栅格系统
准备工作
首先，还是把需要的依赖安装一下 package.json：
"devDependencies": {
"autoprefixer": "^9.1.3",
"css-loader": "^1.0.0",
"postcss-loader": "^3.0.0",
"style-loader": "^0.23.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"scripts": {
"webpack": "webpack"
}
其次，就是准备 Webpack 的配置文件 webpack.config.js，当然，这个配置文件是一部分：
const { join } = require('path');
const config = {};
config.mode = 'production';
config.entry = {
index: join(__dirname, './src/index.js')
};
config.output = {
path: join(__dirname, './dist'),
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
publicPath: join(__dirname, './dist/')
};
config.module = {
rules: []
};
module.exports = config;
最后，就是准备一下需要的代码文件：
index.js：
import './css/common.css';
css/common.css：
* {
margin: 0;
padding: 0;
}
.my-div {
width: 100%;
height: 120px;
display: flex;
}
index.html：
<body>
<script src="./dist/index.bundle.js"></script>
<div class="my-div">这是一个div</div>
</body>
配置 postcss-loader
postcss-loader 的使用一定要在 css-loader 之前，只有这样才能生效。
config.module.rules.push({
test: /\.css$/,
use: [{
loader: 'style-loader',
options: {
singleton: true
}
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
});
此时执行命令 yarn webpack，会报错：
Error: No PostCSS Config found in:
这是因为没有为 PostCSS 增加配置的缘故，PostCSS 增加配置的方式有很多种，这里采用 postcss.config.js，因为这种方式容易扩展。
module.exports = {};
这个时候再执行命令 yarn webpack 的时候，就可以正常打包了。但是在浏览器中打开 index.html 会发现，CSS 并没有增加兼容的代码。
在具体配置之前，首先在 postcss-loader 中配置一下配置文件的路径。
config.module.rules.push({
test: /\.css$/,
use: [{
loader: 'style-loader',
options: {
singleton: true
}
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader',
options: {
config: {
path: join(__dirname, './')
}
}
}]
});
再配置文件中加入相关的配置（以后需要增加 postcss 的相关配置，就需要在这个配置文件中添加）：
module.exports = {
plugins: {
"autoprefixer": {}
}
};
由于 autoprefixer 也是需要一个配置文件的，因此，在项目的根目录中加入一个配置文件 .browserslistrc：
> 0.01%
再次执行命令，就可以在样式中看到自动生成的兼容性样式代码了。
