Loader

配置方式

• webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式 ^开头 $结尾
        test: /\.css$/, // 匹配资源
        use: [
          // 加载顺序是 从后往前
          "style-loader",
          {
            loader: "css-loader",
            // 可选的属性，值是一个字符串或者对象，值会被传入到loader中；
            options: {
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
      },
    ],
  },
};

• test 属性：正则表达式进行资源匹配
• use 属性：[UseEntry]
• loader 属性：use 属性的简写

常见的 loader

• style-loader
• css-loader
• postcss-loader
• less-loader
• url-loader
• file-loader

资源模块类型

Webpack5 使用 asset module type 代替了一些 loader 配置，如 url-loader、file-loader。