当前位置：首页 > 全部内容 > 正文

Webpack Loader 配置与资源模块处理详解

作者：测试手账

时间：2026-10-31

浏览：120

本文详细介绍 Webpack 中 Loader 的配置与使用，涵盖 css-loader、style-loader、sass-loader 及 postcss-loader 的安装与配置方法。同时解析 Webpack5 引入的资源模块类型（asset module type），包括 asset/resource、inline、source 和 asset 的区别与应用场景，帮助开发者优化构建流程。

文章目录

引入CSS文件后执行打包命令 "build": "npx webpack --config wk.config.js"，发现构建过程报错。

css-loader

css-loader

css-loader

Webpack 默认仅能处理 JavaScript 文件，对于 CSS、图片等其他类型资源，必须借助 Loader 进行转换处理。

css-loader

Loader 的核心功能是对模块源代码进行转换。我们可以将 CSS 视为一个模块，通过 import 语句加载。然而，Webpack 默认无法识别如何加载此类模块，因此需要配置特定的 Loader 来完成这一转换工作。 npm i css-loader -D

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
  },
};

在 module.rules 配置中，允许定义多个 Loader。rules 的值是一个包含 rule 对象的数组 [rule]，每个 rule 对象包含多个属性： test：用于匹配资源文件，通常设置为正则表达式。 use：对应的值是一个包含 useEntry 的数组 [useEntry]，useEntry 同样是一个具有特定属性的数组。

  • loader：必须包含的属性，值为字符串。当仅配置一个 Loader 时，可以简写，例如 use:["css-loader"]。
  • options：可选属性，值可以是字符串或对象。
  • query：该属性目前已被 options 替代。

loader：是 use:[loader] 的简写形式，当仅有一个 Loader 时，也可简写为 loader:"css-loader"。

简写配置示例如下：

//原来写法
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
// 简写1
 module: {
    rules: [
      {
        test: /\.css$/,
        loader:"css-loader"
      },
    ],
  },
// 简写2
   module: {
    rules: [
      {
        test: /\.css$/,
        use:["csss-loader"]
      },
    ],
  },

style-loader

仅使用 css-loader 可以解决构建报错问题，但 CSS 样式并未实际生效。这是因为 css-loader 仅负责解析 CSS 内容，而不会将解析后的样式插入到页面 DOM 中。要实现样式生效，需配合 style-loader 将样式注入页面。 npm i style-loader -D

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", "css-loader"],
      },
    ],
  },
};
// use: ["style-loader", "css-loader"], 也可以写成   use: [{ loader: "css-loader" }, { loader: "css-loader" }],

Loader 的执行顺序是从后往前（即从右向左）。在 index.html 中引入打包后的文件，即可在页面中看到实际效果。

css-loader

sass-loader 解析 sass

npm i sass-loader -D

编写 Sass 文件并引入到项目中。

css-loader

配置 sass-loader 以支持 Sass 文件编译。

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", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

postcss-loader

PostCSS 是一个通过 JavaScript 插件转换 CSS 的工具。它协助开发人员处理 CSS，包括自动添加浏览器前缀、支持 CSS 变量、嵌套规则及函数等功能。 npm i postcss-loader -D 以 autoprefixer 插件为例，它可以自动添加必要的浏览器前缀。

.

css-loader

由于 postcss-loader 包含较多配置项，因此推荐使用对象形式进行配置：

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",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
                //也有这种写法plugins: [require("autoprefixer")],现在可以省略require()
              },
            },
          },
        ],
      },
    ],
  },
};

配置结果如下：

css-loader

鉴于 postcss 配置项繁多，通常建议将其抽离为单独的文件 postcss.config.js。

css-loader

在 Webpack 配置中，此时可以简化为：

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", "css-loader", "postcss-loader"],
      },
    ],
  },
};

"autoprefixer" 仅能自动添加浏览器前缀，而 PostCSS 具备更多功能。因此，实际开发中通常不单独安装 "autoprefixer"，而是使用 postcss-preset-env，它可将现代 CSS 特性转换为浏览器可识别的特性。npm i postcss-preset-env -D

css-loader

处理资源模块

在 Webpack5 之前，加载图片等资源需要使用 raw-loader、url-loader 等特定 Loader。在 Webpack5 之后，可以直接使用资源模块类型（asset module type）来替代上述 Loader。

资源模块类型主要分为四种：asset/resource、asset/inline、asset/source 和 asset。

asset/resource：发送单独文件并导出 URL（此前通过 file-loader 实现）。如果有两张图片，打包后会生成两个独立文件，这意味着需要发送额外的网络请求。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

注意：图片也需要作为模块导入。

css-loader

执行命令后，可以看到打包后的结果。

css-loader

asset/inline：将图片进行 Base64 编码，并将编码后的源码打包到 JS 文件中。这会导致 JS 文件体积变得非常大，增加下载和解析 JS 文件的时间。

onst 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", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/inline",
      },
    ],
  },
};

打包后的 JS 文件内容如下。

css-loader

这里还包含了一个背景图.bgi { background-image: url(../asset/1.png); } ，img 标签和 background-image 的 URL 均采用了 Base64 格式。

css-loader

asset/source：将图片源码打包到 JS 文件中，与 asset/inline 类似，同样会导致 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", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/source",
      },
    ],
  },
};

css-loader

asset：可根据需要生成单独文件，或将资源打包到 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", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
      },
    ],
  },
};

通常将 type 设置为 asset，系统会根据文件大小自动决策：较小的文件进行 Base64 编码，较大的文件则单独打包。

根据文件大小进行打包处理。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};
//webpack官网:https://www.webpackjs.com/configuration/module/#ruleparserdataurlcondition
// 如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中， 否则模块文件会被生成到输出的目标目录中。
//dataUrlCondition 还可以写成函数的形式

css-loader

对打包后的文件名及目录结构进行操作。

可以在 output 配置中修改打包后生成的文件名，但在此处修改会影响所有文件，因此不推荐这样做。

// 这里也是可以支持[hash][ext][query]的
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    assetModuleFilename: "aa.png",
  },
  module: {
    rules: [ ],
  },
};

应当针对特定文件进行修改：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};
// webpack官网：https://www.webpackjs.com/configuration/module/#rulegeneratorfilename
//这里其实还可以控制生成的hash值的长度 img/[hash:8][ext]

css-loader

到目前为止涉及的所有代码配置。

//webpack
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", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};
//postcss.config.js
module.exports = {
  plugins: ["postcss-preset-env"],
};

到此这篇关于 Webpack Loader 使用的文章就介绍到这了，更多相关 Webpack Loader 的使用内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

Mock.js 与 MSW、YApi 对比：前端接口模拟工具怎么选

Turf.js 安装与引入：NPM 打包及 CDN 快速上手指南

JS代码混淆后无法调试？Source Map配置与浏览器断点技巧

前端JS发送HTTP请求遇到跨域(CORS)报错怎么解决

Three.js怎么安装：npm引入与CDN加载方法

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例