如果我們在打包的入口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
 

在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']
                                })
                            ]
                        }
                    }
                ]
            }
        ]
    }