什么是loader? (webpack学习篇4)

最新推荐文章于 2024-12-17 16:59:52 发布

原创最新推荐文章于 2024-12-17 16:59:52 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack中loader的配置

Webpack 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了webpack中的loader，它是webpack处理非JS文件的工具。详细解释了为什么需要loader，通过实例展示了如何配置和使用loader打包图片。loader在webpack不能识别特定文件时，起到关键的转换作用。

什么是loader ?

官方把它定义为：用来将一段代码转换成另一段代码的webpack插件。
同时也给出了解释：虽然本质上说，loader也是插件，但因为webpack的体系中还有一个专门的名词就叫插件（plugins），为避免混淆，不再将loader与插件混淆来说。

经过一番学习，我把它理解为webpack辅助打包工具。

为什么会用到loader?

由于webpack默认只能处理JS文件，当我们想打包.png/.jpg…图片、CSS等一些非js文件时，webpack是不知道该怎么去打包它们的。所以，loader的作用就是：当webpack打包文件，不知道该怎么办的时候，loader负责告诉它该怎么办，需要在webpack.config.js配置文件中告诉webpack如何执行打包不认识的文件。

看个例子：（用webpack打包图片）

项目目录如图所示：

在index.js中引入图片：

const Img = require('./aa.png');
const img = new Image();
img.src = Img;

const root = document.getElementById('root');
root.append(img);

webpack.config.js配置文件：

// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
// Common.js语法
module.exports = {
  mode: 'development', // 默认模式为production，可不写，不写时打包运行命令行会有警告
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'dist.js', // 打包之后的输出文件
    path: path.resolve(__dirname, 'dist') 
  }
}

index.html中定义root容器:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- 定义装图片的root容器 -->
  <div id="root"></div>
  <!-- 引入打包之后的js文件 -->
  <script src="./dist.js"></script>
</body>
</html>

接下来执行打包语句：(使用npm scripts方式打包，配置为build，具体配置看"webpack学习篇2")

会发现命令行报错，并提示需要使用合适的loader来打包它。通过这个小例子，让我们知道，当我们打包图片文件时，webpack并不能像识别js一样识别它，需要我们借助额外的工具来告诉webpack如何打包它，所以，就需要我们安装loader, 配置loader打包规则：（步骤如下）

安装file-loader: npm install file-loader -D
在webpack.config.js配置文件中配置loader，所有的loader规则均需要配置到module中 (具体配置如下)

// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
// Common.js语法
module.exports = {
  mode: 'development', // 默认模式为production，可不写，不写时打包运行命令行会有警告
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{ // 配置打包规则
      test: /\.(jpg|png|jpeg)$/, // 可打包的文件名后缀
      use: { 
        loader: 'file-loader',
        options: { // 配置参数
          // 这种配置语法叫做：占位符
          name: '[name]_[hash].[ext]' // 使用图片的名字，并使用图片的后缀
        }
      }
    }]
  },
  output: {
    filename: 'dist.js', // 打包之后的输出文件
    path: path.resolve(__dirname, 'dist') 
  }
}