webpack之css-loader

如果我们在打包的入口js文件中import了css文件，并且想要把css文件作为<style>的内容插入到模版文件，这时候我们要用到webpack的css-loader和style-loader，前者用于在js中加载css，后者把加载的css作为style标签内容插入到html中。另外，如果某些css要考虑到浏览器的兼容性(比如css3中的flex)，我们要webpack在打包的过程中自动为这些css属性加上浏览器前缀，这时就用到了postcss-loader和它对应的插件autoprefixer。

1.安装

npm install css-loader style-loader postcss-loader --save-dev
npm install autoprefixer --save-dev

2.配置

在webpack.config.js中的module加入一个新的规则，如下

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: path.resolve(__dirname,'/node_modules/'),
                include: path.resolve(__dirname,'/src/'),
                loader: "babel-loader",
                options: {
                    presets: ["es2015"]
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {importLoaders: 1}
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins:(loader)=>[
                                require('autoprefixer')({
                                    browsers:['last 5 versions']
                                })
                            ]
                        }
                    }
                ]
            }
        ]
    }

第一条规则是用来解析es6的，我们累赘。第二条规则就是我们用来处理css文件的，其中如果用到了多个加载器，可以用use数组的方式。数组的每个对象对应一个加载器。每个加载器如要设置参数的话加上关键字options.