webpack学习笔记-配置webpack进行css兼容处理

配置文件：

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置
}

1.安装插件postcss-loader和autoprefixer

npm install --save-dev postcss-loader autoprefixer

2.编写webpack.config.xml，这里特别注意postcss的配置，在这里博主搞了一下午才搞懂这个。

module.exports={
    //__dirname是nodejs中的一个全局变量,它指向我们项目的根目录
    //入口文件的位置
    entry:__dirname+'/app/main.js',
    //出口文件
    output:{
        //打包后的文件放置的位置
        path:__dirname+'/public',
        //打包后文件名
        filename:'webpack.js'
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                type:'javascript/auto',
                use: 'json-loader'
            },
            {
                test:/\.css$/,
                loader:[
                    'style-loader',
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            sourceMap:true,
                            //设置配置postcss配置文件
                            config:{
                                path:'./postcss.config.js'
                            }
                        }
                    }
                ]
            }
        ]
    },
};

3.编写postcss.config.js

module.exports = {
    plugins: [
        //注意这里的参数，如果不传参数是不会做任何处理
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7", "last 3 iOS versions"
            ]
        })
    ]
};

4.编译，编译和以前一样

5.看效果