webpack5 中 css-loader 的配置

loader 解释器

//webpack.config.js
module: {
     
    rules: [ //在这里面定义指定文件对应的解释器
      //规则定义
      {
     
        test: /\.js$/, //正则
        exclude: /node_modules/,
        use: {
     
          loader: "babel-loader", //根据 .babelrc 文件艰辛规则渲染
        },
      },
      {
     
        test: /\.(s[ac]|c)ss$/i, //正则
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ]
},

---

css 文件抽离插件

我们在开发中如果希望 CSS 文件单独的抽离出来而不是在js文件中的话，我们可以通过下面的插件对 CSS 进行抽离。

yarn add -D mini-css-extract-plugin

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //引入插件
plugins: [new MiniCssExtractPlugin()], //加载插件
 module: {
     
    rules: [
      {
     
        test: /\.(s[ac]|c)ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], //应用插件
      },
    ],
},

---

CSS 浏览器版本兼容插件

很多同学在日常的板砖中肯定遇到过 CSS 的样式对于个浏览器的兼容性不好的问题，对于这种问题其实我们通过一个插件就可以解决大部分兼容问题，这个插件会自动给需要的属性添加类似 -webkit- 灯类似的前缀。

yarn add -D postcss postcss-loader postcss-preset-env

//webpack.config.js
module: {
     
    rules: [
      //规则定义
      {
     
        test: /\.(s[ac]|c)ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
          "post-loader", //添加post-loader加载器
        ],
      },
    ],
  },

创建postcss配置文件 postcss.config.js

//postcss.config.js
module.exports = {
     
  plugins: [require("postcss-preset-env")],
};

创建 postcss-preset-env 配置文件 .browserslistrc

例子	说明
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
> 1%	全球超过1%人使用的浏览器
Firefox ESR	火狐最新版本
Firefox > 20	指定浏览器的版本范围
not ie <=8	方向排除部分版本

// 示例
last 2 versions // 回退两个浏览器版本
> 0.5% // 全球超过0.5%人使用的浏览器
IE 10 //兼容IE 10