webpack4.0 配置loader打包静态文件（样式篇）

背景： 我们常常在js文件引入css或scss文件……

1. code

需要安装的插件：
yarn add style-loader css-loader postcss-loader -D //必须安装
如果使用scss文件： yarn add sacc-loader node-sass -D
若想把css文件进行代码分割： yarn add mini-css-extract-plugin -S //生产环境
对css代码进行压缩：yarn add optimize-css-assets-webpack-plugin -S
……
const OptimizeCSSAssetsPlugins = require("optimize-css-assets-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //请在webpack的生产环境js文件配置两个选项

  module: {
    rules: [{
        test: /\.scss$/,
        use: [
          "style-loader",  //若为pro环境，替换成MiniCssExtractPlugin.loader（变量非字符串）
          {
            loader: "css-loader",
            options: {
              importLoaders: 2, //也要走两个loader，防止scss文件再引入scss文件，而无法解析
              modules: true
            }
          },
          "sass-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
        //若为pro环境，"style-loader"替换成MiniCssExtractPlugin.loader（变量非字符串）
      }
    ],
    optimization: {
	    //只打包引用的文件"sideEffects": false,
	    usedExports: true，
	    minimizer: [new OptimizeCSSAssetsPlugins()] //压缩代码
	  }
    }

package.json 文件
……
{
  "name": "webpackdemo",
  "sideEffects": [  //增加此行代码，即使css，scss文件无输出，对此类文件进行过滤
    "*.css",
    "*.scss"
  ],
  "version": "1.0.0",
}

2. 各个loader的作用，从右至左来加载

• postcss-loader： 在属性前加兼容性前缀如 -webkit-transform，使用这个loader时可以在根目录添加postcss.config.js文件，配置如下

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

• css-loader： 可能我们的css文件中还引入其他css文件，如在index.css文件中引入 @import ‘main.css’，通过这个loader 可以把各个css文件整合至一个css文件
• style-loader： 把整合好的css文件放在html的head标签中

结论：所以解析css时，从右至左为[“style-loader”, “css-loader”, “postcss-loader”]

若解析scss文件，则在进行css-loader前，先用sass-loader解析成css文件，若解析好的css文件中仍然引用了其他scss文件，则写成如上的options写法，importLoaders: 2 再次用sacc-loader进行解析。
modules: true 为模块化css，每个文件的css进行独立，不相互污染样式