Webpack 是一个强大的前端构建工具，可以通过它将各种静态资源打包成一个或多个 bundle 文件，方便前端代码的管理和维护。在这个过程中，常常使用到各种 Loader 和 Plugin。本文将介绍常用的 Loader 和 Plugin，供大家学习参考。
一、常用 Loader
1.1 babel-loader
babel 是一个兼容性处理工具，可以将 ECMAScript 2015+ 年份的代码转换成可在当前浏览器中运行的 ES5 代码。babel 提供了许多插件，可以根据不同的场景进行选择与配置。babel-loader 就是将 babel 转换集成到 webpack 中，允许我们在 webpack 的打包过程中使用 babel。
安装依赖
npm install -D babel-loader @babel/core @babel/preset-env
webpack 配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--1.2 file-loader
file-loader 用于处理图片及字体等文件，将这些文件以文件的形式输出到打包后的目标文件夹中。同时，对于使用这些文件的路径，也会自动替换为打包后的正确路径。
安装依赖
npm install -D file-loader
webpack 配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------------------
------- --------------
-------- -
----------- --------
-
--
-
----- ---------------------------------
------- --------------
-------- -
----------- -------
-
-
-
-
--1.3 css-loader
css-loader 用于处理 css 文件，可以让我们在 webpack 的打包过程中，通过 import 的方式，引入 css 文件，并且将其打包到我们最终生成的文件中。
安装依赖
npm install -D css-loader
webpack 配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
-
--1.4 sass-loader
sass-loader 用于处理 Sass/Scss 文件，可以让我们在 webpack 的打包过程中，通过 import 的方式，引入 Sass/Scss 文件，并将其编译为 css 文件，然后打包到我们最终生成的文件中。
安装依赖
npm install -D sass-loader sass
webpack 配置
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------
---- -
---------------
-------------
-------------
-
-
-
-
--二、常用 Plugin
2.1 html-webpack-plugin
有时候我们需要生成HTML文件，并且将打包后的文件自动引入到HTML中，这时候就需要 html-webpack-plugin 这个插件了。它可以将打包后的 JS、CSS 自动引入到 HTML 文件中，并且可以支持生成多个 HTML 文件。
安装依赖
npm install -D html-webpack-plugin
webpack 配置
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ---------
--
-
--2.2 clean-webpack-plugin
在重新打包时，有时候我们需要清空之前的打包文件，这时候就需要 clean-webpack-plugin 这个插件了。它可以在重新打包之前清空指定目录的文件。
安装依赖
npm install -D clean-webpack-plugin
webpack 配置
-- -------------------- ---- -------
----- - ------------------ - - --------------------------------
-------------- - -
-------- -
--- --------------------
----------------------------- ----------
--
-
--2.3 copy-webpack-plugin
有时候我们需要将不需要 webpack 处理的文件，如一些公共资源文件，复制到指定的目录。这时候就需要 copy-webpack-plugin 这个插件了。
安装依赖
npm install -D copy-webpack-plugin
webpack 配置
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
----------
-
----- ---------------------------------------
--- ---------------------------------------
-
-
--
-
--总结
本文介绍了常用的 Loader 和 Plugin，使得我们可以更方便的管理和维护前端代码。希望本文对大家有所帮助，也欢迎大家补充完善。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64563df9968c7c53b097758c