什么是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配置文件：

// 在这里做打包配置