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

什么是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') }
}

再次执行打包命令：
成功后页面展示效果：

loader的作用？

经过一番尝试，图片文件在loader的辅助下，被打包成功，所以我们说loader是webpack的打包辅助工具。在webpack不知道该怎么打包某文件时，我们可以借助loader工具告诉webpack该如何进行打包。

到此分享结束，希望和大家一起学习~进步