深度解读Webpack中的loader原理

一、前言

webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢？

没错就是通过 loader。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或加载模块时预处理文件。

我们带着下面几个问题，彻底吃透 loader ～

二、为什么要使用 loader

webpack 是如何加载资源模块的呢？我们先试着用 webpack 直接打包项目中的 css 文件。

初始化一个 webpack 项目，目录如下：

在 src 目录下新建了一个 index.css 文件，这里新建这个文件的目的就是以 css 文件为入口，尝试使用 webpack 单独打包它。

/* index.css */
body {
   
  margin: 0 auto;
  padding: 0 20px;
  width: 1000px;
  background-color: #ccc;
}

调整下 webpack 配置，让入口文件路径指定为 index.css 的路径。

// webpack.config.js
module.exports = {
   
  entry: "./src/index.css",
  output: {
   
    filename: "bundle.js",
  },
};

然后我们到终端运行 npx webpack 命令，你会发现命令行会提示 Module parse failed: Unexpected token (1:5) 模块解析错误。

细心的同学会发现后面还紧跟着一句解决方案：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

大致的意思就是说，您可能需要适当的 loader 来处理此文件类型，目前没有配置 loader 来处理此文件。

这里，loader 的重要性就凸显出来了。

三、怎么配置 loader

还是接着刚才打包 index.css 报错的问题。想加载 css 文件，我们可以试试常用的 css-loader。

yarn add css-loader -D

webpack 配置也同步改下：

// webpack.config.js
module.exports = {
   
  mode: "none", // 避免不指定打包模式时弹出警告
  ...
  module: {
   
    rules: [
      {
   
        test: /\.css$/,