webpack5配置CSS

webpack只能解析js，需要依赖相关loader进行解析css

css

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
style-loader：会在输出文件中动态创建一个 Style标签，以模块化的形式输出Css内容

npm i css-loader style-loader -D

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

less

less-loader:负责将 less 文件编译成 Css 文件

npm i less-loader -D

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

sass/scss

sass-loader：负责将 sass 文件编译成 css 文件
sass：sass-loader 依赖 sass 进行编译

npm i sass-loader sass -D

 module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },

stylus

stylus-loader：负责将 styl 文件编译成 css 文件

npm i stylus-loader -D

  module: {
    rules: [
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },

页面闪屏问题

因为style-loader是把css文件打包在了输出的js文件中，也就是必须这个js文件请求完才会在页面上看到效果，所以在请求js的过程中如果延时比较久，页面会出现暂时样式丢失导致的闪屏情况。

使用单独的css文件在html页面中 <style link=''>的方式进行导入样式

插件：mini-css-extract-plugin

npm i mini-css-extract-plugin -D

使用 mini-css-extract-plugin里的loader 替换掉原有的 style-loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//省略

module:{
    rules:[
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    }
    ]
},

//省略

  plugins: [

    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],

这样打包好，就会在html单独导入了。

解决兼容性问题

npm i postcss-loader postcss postcss-preset-env -D

在所有 css-loader之前配置post-loader。 

module:{
    rules:[
        {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
    ]
}

 设置兼容性处理程度

在 package.json 文件中添加 browserslist

//小于ie8的浏览器不处理
"browserslist": ["ie >= 8"]

//兼容市面上最近2个版本的浏览器，全球超过1%人使用的浏览器，正在维护中的
"browserslist": ["last 2 version", "> 1%", "not dead"]