webpack 样式分离-webpack(v4.8.3)中对css的几种处理总结（css分离

1.CSS分离

我们知道webpack的思想就是把所有的东西都打包成js文件，包括css、图片等，优点是减少http请求，但是缺点也很明显。 随着项目越来越大，js文件也会越来越大，所以我们需要将css文件分开。

CSS分离，嗯，实际上就是将CSS分开打包。 方法很简单，需要一个插件webpack 样式分离，extract-text-webpack-plugin@next（注：添加@next是现阶段必须的（前提是你使用的webpack是4.0及以上版本，如果你使用版本3及之前版本，不需要添加@next），但如果以后过渡到该版本，则不需要添加）。 如果目前不添加，则插件版本太低。 ，会报错

npm i extract-text-webpack-plugin@next -D 在配置文件中引入 const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); 将新的 ExtractTextWebpackPlugin('css 提取路径') 添加到插件中。 更改配置文件中css的设置如下

{
                test:/.css$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader']
                })
            }

注意：某些设置可能会导致图像背景路径问题。 这时可以添加publicPath来改变css后台路径问题（根据具体情况而定）

2.消除多余的css代码

通常我们在写一些项目的时候，都会引入一些框架比如bootstrap。 引入这个框架之后，文件会显得非常大，但是我们能用的却很少，这样就会浪费很多代码，所以这个时候我们就可以想办法优化这类代码。 说白了，就是去掉不用的css代码。

我们知道webpack有很多优点，其中之一就是可以优化代码，提高性能。消除多余的css代码也是webpack优化性能的一种方式

步：

npm i purifycss-webpack purify-css -D 引入插件： const PurifyCssWebpack = require('purifycss-webpack'); 还需要引入一个额外的包 glob （用于扫描路径） npm i glob -Dconst glob = require('glob' ); 在插件中配置：

new PurifyCssWebpack({
            paths:glob.sync(path.join(__dirname,'src/*.html'))
        })

3.自动添加浏览器内核前缀

这里需要使用post-css（预处理器）和一个插件autoprefixer（处理前缀的插件，众多post-css插件之一）

步：

1. npm i postcss-loader autoprefixer -D

2、根目录下添加配置文件postcss.config.js，然后配置postcss

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

3、在webpack.config.js中的css处理配置文件中添加postcss-loaderwebpack 样式分离，如下图

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

注：写法有很多种，以上仅供参考。

如果你想分离css，你可以这样写

 {
                test:/.css$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','postcss-loader']
                })
            }