webpack（v4.8.3）中对css的几种处理总结（css分离，消除冗余的css代码，自动添加浏览器内核前缀）

偏执的太偏执、 2022-05-24 05:44 218阅读 0赞

## 一、CSS分离 ##

我们知道webpack的理念就是把所有的东西都打包到js文件中，包括css、图片呀等等，好处是减少http请求，但劣势也很明显，就是随着项目越来越大，js文件也会越来越大，所以，我们就需要对css文件进行分离

css分离，嗯，其实就是将css单独打包，做法很简单，需要一个插件，extract-text-webpack-plugin@next（注意：加@next是现阶段必须要加的（前提是你使用的webpack是4.0版本及以上的，如果你使用的是3版本及以前的版本的话不需要加@next），但以后如果过渡到了这个版本，就不需要加了），目前如果不加，插件版本太低，会报错

1.  npm i extract-text-webpack-plugin@next -D
2.  在配置文件中引入  const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
3.  在plugins中加入new  ExtractTextWebpackPlugin('css提取出去的路径') 
4.  在配置文件中修改针对css的设置如下所示

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

注意：有的设置可能会出现图片背景路径问题，此时可以加入publicPath来修改css背景路径问题（视具体情况而定）

## 二、消除冗余的css代码 ##

平时我们去写一些项目的时候，会引入一些框架比如bootstrap，引入这个框架后，文件会变得很大，，而我们能用到的却很少，那很多代码就浪费掉了，所以这时候我们就可以想办法优化这些代码，说白了，就是把没有用到的css代码给去除掉

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

步骤：

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

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

## 三、自动添加浏览器内核前缀 ##

这里需要用到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-loader，如下所示

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

注意：写法很多，上面只是参考哦

如果想要分离css，可以写成

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