webpack配置浏览器厂商前缀

安装
webpack打包时，自动配置浏览器前缀，需要用到一个loader(postcss.loader)和一个插件(autoprefixer),所以首先需要安装好插件和loader。

npm install postcss-loader -D
npm install autoprefixer@version -D

version为相应的版本号，部分较高版本不起效，亲测7.2.6和7.2.1版本有效,所以建议安装时指定版本号。

配置
安装完成后，在webpack.config.js的同级目录下新建postcss.config.js文件，并配置插件

module.exports = {
    
    
   plugins: [
        require('autoprefixer')
    ]
};

在webpack.config.js文件下，找到module下的rules属性，添加loader配置

const path = require('path')
module.exports = {
    
    
    mode: "production",     /** development*/
    entry: {
    
    
        main: "./src/index.js"
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.(png|jpg|gif)$/i,
                use: {
    
    
                    loader: "url-loader",
                    options: {
    
    
                        name: '[name]_[hash].[ext]',
                        outputPath: "static/images",
                        limit: 10240, 
                        //图片大小限制，若大于该值，则打包搭配dist/static/images下，若小于该值，打包到js文件
                    }
                }
            },
            {
    
    
                test: /\.scss$/i,
                use: ['style-loader','css-loader','sass-loader','postcss-loader'],
            }
        ]
    },
    output: {
    
    
        filename: 'index.js',
        path: path.resolve(__dirname, "dist")
    }
}

由于loader执行顺序为从右向左，所以use里面的loader顺序不能写反。webpack打包时，首先会调用postcss-loader为浏览器添加厂商前缀，，然后通过sass-loader把sass语法转化为css语法，然后执行css-loader整合css代码，最后执行style-loader,讲整合的css代码添加到style标签中。所以此时需要安装以下loader:

npm i style-loader css-loader sass-loader node-sass -D