Webpack 是前端开发中常用的打包工具之一，其主要功能是将多个模块打包成一个文件，支持 JavaScript、CSS、图片等多种资源文件的打包。但是当我们在使用 Webpack 进行项目构建的时候，可能会遇到一些非入口依赖的模块需要处理的情况，这时候我们就需要使用 Loader 进行处理。
什么是 Loader？
首先，我们需要了解 Loader 是什么。Loader 是 Webpack 主要的转换器，用来将一些资源文件（比如说 JavaScript、CSS、图片等）对应的代码转换为 Webpack 可以识别的模块。我们可以使用 Loader 将非 JS 文件转为 JS 模块，从而被 Webpack 解析和打包。
Webpack 的配置文件中有一个 module 属性，我们可以在该属性中设置 rules，用来为不同的资源文件配置不同的 Loader。下面是一个简单的例子。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
--
-
----- -------------------
---- -
-
------- --------------
-------- --
-
-
-
-
-
-在上述代码中，我们为 CSS 和图片资源文件分别配置了不同的 Loader。
对于 CSS 文件，我们使用了两个 Loader，分别是 style-loader 和 css-loader。其中，css-loader 是将 css 文件转为 JS 模块，style-loader 会将 css 代码以内联样式的形式加到 web 页面中。
对于图片资源文件，我们使用了一个 file-loader。该 Loader 会将图片资源文件复制到打包后的文件夹中，并返回该图片在输出目录中的路径名。
总结
通过使用 Loader，我们可以很方便地处理非入口依赖。除了上述示例中介绍的 Loader，Webpack 社区还有很多优秀的 Loader 工具，比如说 babel-loader 可以将 ES6 代码转为 ES5 代码，less-loader 可以将 less 文件转为 CSS 文件等等。不同的 Loader 工具可以帮助我们更加灵活地进行前端开发，提高效率和代码质量。
最后，我们需要注意的是，使用 Loader 会导致构建时间的增加，因此我们需要根据项目需求选择和配置合适的 Loader 工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646986b7968c7c53b096a137