处理CSS文件 (7)

 pnpm add style-loader css-loader -D

module.exports = {
  ......
  module: {
    rules: [
			......
      {
        test: /\.css$/,
        use: [
          'style-loader', // 将css写入到style标签
          'css-loader' // 处理css文件
        ]
      },
    ]
  }
}

提取CSS文件

将css打包到js文件中，在js文件加载时，会创建一个style标签来生成样式。也就是说，css打包在js文件中，只有js文件全部加载完成时才会显示样式。

处理单独的css文件，通过link标签加载。

pnpm add mini-css-extract-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

console.log(process.env.NODE_ENV);

/**
 * @type {import('webpack').Configuration}
 */
module.exports = {
  ......
  module: {
    rules: [
      ......
      plugins: [
    		......
        new MiniCssExtractPlugin({
          // 定义输出文件名和目录
          filename: "css/[name].[contenthash:6].css",
        }),
      ],
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      //{
      //  test: /\.css$/,
      //  use: [
      //    'style-loader', // 将css写入到style标签
      //    'css-loader' // 处理css文件
      //  ]
      //},
    ]
  }
}

预处理器

sass/scss

pnpm add sass sass-loader -D

{
  test: /\.s[ac]ss$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
}

less

pnpm add less less-loader -D 

{
  test: /\.less$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
}

这样重复太多，可以封装一个函数，处理不同的预处理器

函数封装

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  ......
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.css$/,
            use: getStyleLoaders(),
          },
          {
            test: /\.s[ac]ss$/i,
            use: getStyleLoaders("sass-loader"),
          },
          {
            test: /\.less$/i,
            use: getStyleLoaders("less-loader"),
          },
          {
            test: /.styl$/,
            use: getStyleLoaders("stylus-loader"),
          },
        ],
      }
     ]
}

CSS Module

css-loader可以开启CSS Module模式，但是如果直接修改会导致所有css后缀的loader混乱，所以需要处理一下

{
  test: /\.css$/,
  exclude: [/\.module\.css$/], //排除.module.css
  use: getStyleLoaders(),
},
{
  test: /\.module\.css$/,
  exclude: [/node_modules/], // 排除node_modules目录
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: '[name]_[local]_[hash:base64:5]',
        }
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
  ],
},

postcss后处理器

pnpm add postcss postcss-loader autoprefixer -D

autoprefixer用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀，如果希望获取更大的兼容性，可以使用postcss-preset-env插件

pnpm add postcss-preset-env -D

需要依托于browserslist，因此之前配置的.browserslistrc文件一样可以起作用

> 1%
last 2 versions
not dead
not ie 11

当然，如果你想精准控制开发和生产环境，可以在package.json文件中进行配置，注意：配置两者只能取其一

"browserslist":{
    "development": [
      ">1%",
      "last 1 version", 
      "not dead"
    ],
    "production":[
      ">0.2%", 
      "last 2 versions", 
      "not dead", 
      "not op_mini all"
    ]
}

在webpack的配置中，加入相关配置

const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor
  ].filter(Boolean);
};

也可以将postcss的配置提取出来，单独文件进行配置，比如创建postcss.config.js文件

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
    ]
  ],
};

那么在webpack的配置中，只需要配置postcss-loader即可，会自动读取根路径下的postcss.config.js文件配置

const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader"
    preProcessor
  ].filter(Boolean);
};