Web前端工程化（八） - postCSS自动添加css的兼容前

准备学习Web前端工程化的内容，做个记录，以后需要的时候方便查找：

webpack只能打包处理.js相关的文件，其他资源可以使用插件的方式来曲线救国。

1 安装处理postCSS文件的loader，运行如下命令：

npm i postcss-loader autoprefixer -D

2 在项目根目录中创建postcss的配置文件postcss.config.js，并开始如下配置：

const autoprefixer = require("autoprefixer"); // 导入自动添加前缀的插件

module.exports = {

    plugins:[ autoprefixer ] // 挂载插件

} 

3 在webpack.config.js的module -> rules数组中，添加loader规则如下：

module.exports = {

    ......

    plugins:[ htmlPlugin ],

    module : {

        rules:[

            ..........

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

        ]

    }

}