Webpack 是一个非常流行的前端构建工具，它可以将多个 JavaScript 文件打包成一个或多个文件，同时还可以处理 CSS、图片、字体等资源文件。Webpack 通过 Loaders 处理各种类型的文件，而 Plugins 则可以在打包过程中执行各种任务。本文将详细介绍如何正确地链接 Loaders 和 Plugins。
Loaders
Loaders 可以处理各种类型的文件，例如 CSS、Less、Sass、图片、字体等，它们负责将这些文件转换成 JavaScript 模块。Loaders 通过在 Webpack 配置中指定来使用，例如：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
-上面的配置将会使用两个 Loader 处理所有以 .css 结尾的文件。首先使用 css-loader 将 CSS 文件转换成 JavaScript 模块，然后使用 style-loader 将 CSS 模块注入到 HTML 中。
在实际开发中，我们可能需要使用多个 Loader 处理同一个类型的文件，例如同时使用 babel-loader 和 ts-loader 处理 TypeScript 文件。这时需要注意 Loader 的顺序，因为每个 Loader 的处理结果都会作为下一个 Loader 的输入。例如：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
---- -
---------------
-----------
-
-
-
-上面的配置将会先使用 babel-loader 将 TypeScript 文件转换成 JavaScript，然后再使用 ts-loader 将 JavaScript 文件转换成 TypeScript。这显然是不正确的，正确的配置应该是：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
---- -
------------
--------------
-
-
-
-Plugins
Plugins 可以在打包过程中执行各种任务，例如生成 HTML 文件、压缩代码、提取公共代码等。Plugins 通过在 Webpack 配置中实例化并传入参数来使用，例如：
-- -------------------- ---- -------
-------- -
--- -------------------
--------- -------------
------- -
------------------- ----
-
---
--- ----------------
-上面的配置将会使用两个 Plugin。HtmlWebpackPlugin 将会根据 template 参数生成 HTML 文件，并将打包后的 JavaScript 文件注入到 HTML 中。UglifyJsPlugin 将会压缩 JavaScript 代码。
在实际开发中，Plugins 可能会相互依赖，例如 CommonsChunkPlugin 可以提取公共代码，而 UglifyJsPlugin 可以压缩代码。这时需要注意 Plugin 的顺序，因为每个 Plugin 的执行结果都会作为下一个 Plugin 的输入。例如：
plugins: [
new CommonsChunkPlugin({
name: 'common'
}),
new UglifyJsPlugin()
]上面的配置将会先提取公共代码，然后再压缩 JavaScript 代码。这是正确的配置，因为 UglifyJsPlugin 依赖于 CommonsChunkPlugin 提取的公共代码。
总结
Loaders 和 Plugins 是 Webpack 中非常重要的两个概念，它们可以帮助我们处理各种类型的文件和执行各种任务。在使用 Loaders 和 Plugins 时，需要注意它们的顺序，因为它们的执行结果会作为下一个 Loader 或 Plugin 的输入。正确地链接 Loaders 和 Plugins 可以帮助我们更好地使用 Webpack，提高开发效率。
示例代码
下面是一个完整的 Webpack 配置示例，它使用了多个 Loaders 和 Plugins：
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - ------------------------------
----- -------------- - ----------------------------------
----- ----------------- - --------------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
--------------
-
--
-
----- ---------
---- ---------------------------
--------- ---------------
---- -
------------
-
--
--
-
----- ---------------------
---- -
-
------- -------------
-------- -
------ ----
-
-
-
-
-
--
-------- -
--- -------------------
--------- -------------
------- -
------------------- ----
-
---
--- -----------------
--- -------------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c88e41add4f0e0ff259b19