前言
随着前端技术的发展和应用场景的变化，前端开发逐渐从单纯的页面编写拓展到组件化、模块化开发。这时，我们需要使用一些第三方库来协助我们完成开发任务，并且这些库往往需要通过 Webpack 自动构建才能使用。
Webpack 是一款常用的前端自动化构建工具，它拥有丰富的插件和配置，可以满足多种开发需求。本文将介绍如何通过 Webpack 自动构建可以使用的库，以及如何配置 Webpack。
安装 Webpack 和相关插件
首先，我们需要安装 Webpack 以及一些相关的插件。可以通过 npm 安装：
npm install webpack webpack-cli --save-dev npm install html-webpack-plugin clean-webpack-plugin --save-dev
其中，webpack 和 webpack-cli 分别是 Webpack 的核心模块和命令行工具。html-webpack-plugin 可以自动生成 HTML 页面，并将打包好的脚本自动引入页面中。clean-webpack-plugin 可以在每次打包前清空目录，避免因为缓存导致打包出错。
安装完成后，我们就可以开始配置 Webpack 了。
配置 Webpack
Webpack 的主要配置文件是 webpack.config.js。可以通过以下命令在项目根目录下创建该文件：
touch webpack.config.js
然后在 webpack.config.js 文件中进行配置。
入口和出口
首先，我们需要设置 Webpack 的入口和出口。入口是项目的入口文件，出口是打包后的文件输出路径。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
--上述代码中，entry 的值为 ./src/index.js，output 的值为 bundle.js 和 dist，表示打包后的文件名为 bundle.js，并放在 dist 目录下。
加载器
Webpack 支持加载器（Loader），它可以将不同格式的文件转换成 JavaScript 模块。在使用第三方库时，这一特性尤为重要。例如，当我们需要使用 Scss 样式时，就需要使用 sass-loader。
-- -------------------- ---- -------
-------------- - -
-- -------
------- -
------ -
-
----- ----------
---- ---------------- ------------- ---------------
--
-- ------- ------ --
--
--
--上述代码中，我们使用 sass-loader 将 scss 文件转换成 css 文件，然后使用 css-loader 将 css 文件转换成 JavaScript 代码，并使用 style-loader 将 JavaScript 代码注入到 HTML 文件中。
插件
Webpack 支持插件（Plugin），它可以完成一些比较复杂的任务，例如压缩代码、生成 sourcemap 等。
在使用第三方库时，我们也可以使用插件辅助完成打包任务。例如，当我们需要将第三方库暴露成全局变量时，就可以使用 expose-loader。
-- -------------------- ---- -------
-------------- - -
-- -------
-- -----
-------- -
--- -----------------------
-- ---------
------- ---------
---
--- ---------------
-------- ---------------
---
-- -----------
--
--上述代码中，我们使用 ProvidePlugin 将 jquery 库暴露成全局变量 $ 和 jQuery，然后使用 expose-loader 将 $ 和 jQuery 暴露到全局下。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ------------------ - --------------------------------
----- ------------ - -------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ----------
---- ---------------- ------------- ---------------
--
-
----- --------------------------
---- --
------- ----------------
-------- ---
--
--
--
--
-------- -
--- ---------------------
--- -------------------
------ -------- ------
---
--- -----------------------
-- ---------
------- ---------
---
--- --------------
-------- ---------------
---
--
--总结
通过本文的介绍，我们了解了如何通过 Webpack 自动构建可以使用的库。配置 Webpack 时，我们需要进行入口和出口、加载器和插件的配置。同时，我们也可以使用示例代码进行参考和练习。通过对 Webpack 的深入学习，我们可以更好地应对前端开发的挑战。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64df7633f6b2d6eab3aabb8d