webpack处理css

在 Webpack 中处理 CSS，通常需要下面的loader和plugin

• 预处理less/sass/stylus：把less代码转成css代码，让css-loader解析
• 后处理postcss：对写的css代码进行后处理，如添加浏览器前缀
• css-loader：把css文件编译成模块让 webpack 理解，支持css module
• style-loader：css代码打包到js代码里，通过<style>标签插入html
• mini-css-extract-plugin：单独抽离成css文件进行加载，并且该库含plugin+loader，需同时使用
• 使用 CssMinimizerWebpackPlugin 压缩 CSS

rules: [
    {
        test: /\.less$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require('autoprefixer')]
              }
            }
          },
          'less-loader'
        ]
      }
 ],
      
plugins: [
    new MiniCssExtractPlugin(),
],

postcss通常结合autoprefixer使用，补全浏览器前缀

{
  loader: "postcss-loader",
  options: {
    postcssOptions: {
      plugins: [require('autoprefixer')]
    }
  }
}

#或配置postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer({
      overrideBrowserslist: [
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
    })
  ]
}

注意：css插件执行顺序很重要：
(*webpack插件顺序是从数组最后一项开始执行)
less-loader -> postcss-loader -> css-loader -> style-loader/mini-css-extract-plugin