webpack入门(四):自动处理css前缀、净化css

一、自动处理css前缀：postcss-loader、autoprefixer

postcss(预处理器)，专门处理css的平台。

1. 安装：cnpm i postcss-loader autoprefixer -D
2. 创建postcss的配置文件postcss.config.js

//postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

3. 配置loader

rules: [
  {
    test: /\.css$/,
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader','postcss-loader'],
      publicPath: '../'        //解决css背景图片路径问题
    })
  }
]

二、净化css：purifycss-webpack

1. 安装：cnpm i purifycss-webpack purify-css -D
2. 引入：const PurifycssWebpack = require('purifycss-webpack')
3. 需要使用一个额外包用于扫描路径：glob
   (1)安装：cnpm i glob -D
   (2)引入：const Glob = require('glob')
4. 使用：

plugins: [
  //提取CSS
  new ExtractTextWebpackPlugin('css/index.css'),
  //净化css
  new PurifycssWebpack({
    paths: Glob.sync(path.join(__dirname,'src/*.html'))
  })
]

*注意：使用净化css一定要在使用提取css之后，否则可能不起作用。

三、source-map调试

• webpack 4.X开启调试，只需要以开发模式打包即可，--mode development
• webpack之前的版本开启调试，需要在webpack.config.js文件中通过devtool开启source-map：

//开发工具
  devtool: 'source-map',
  //插件
  plugins: []