在前端开发中，我们常常需要使用 jQuery 和 Highcharts 这两个库，它们能够帮助我们快速地开发出功能强大、易于维护和优雅的页面。不过，由于它们都是比较大的库，如果在项目中同时引用，会导致项目的体积非常大，加载时间也会变长，影响用户体验。
针对这个问题，我们可以使用 webpack 来将这两个库分离出来，只在需要使用的页面中才引入它们。接下来，本文将详细介绍如何使用 webpack4 来分离 jQuery from Highcharts 的全过程。
步骤一：安装 webpack 和相关的 loader
首先，我们需要安装 webpack 和相关的 loader，比如 babel-loader 用于编译 ES6，css-loader 用于加载 css 文件等等，这里我们只需要安装两个 loader，分别是 babel-loader 和 css-loader。
# 安装 webpack 和相关的 loader npm install webpack webpack-cli babel-loader css-loader --save-dev
步骤二：创建项目目录结构
接下来，我们需要创建项目的目录结构，使用命令行创建项目的目录和文件：
-- -------------------- ---- ------- - ------ ----- ------------------------- -- -- ------------------------- - ----- --- ---- - -------- ----- --- -- ------ ----- -------------- ----------- ----------------
步骤三：添加 jQuery 和 Highcharts 库
在 js 目录下，我们需要添加 jQuery 和 Highcharts 的库文件，这里我们使用 npm 来安装 jQuery 和 Highcharts，然后在项目中引用它们：
# 安装 jQuery 和 Highcharts 库 npm install jquery highcharts --save # 在 index.js 中引用 jQuery 和 Highcharts import $ from 'jquery'; import Highcharts from 'highcharts';
步骤四：添加 webpack 配置文件
接下来，我们需要添加 webpack 的配置文件，命名为 webpack.config.js。在配置文件中，我们需要设置 entry 和 output，将 jQuery 和 Highcharts 打包成单独的文件。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -
------- ---------- -------------
--
------- -
--------- -------------------
----- ----------------------- -------
-
--步骤五：配置 babel-loader 和 css-loader
由于我们使用了 ES6 和 css，所以需要配置对应的 loader。在 webpack.config.js 中添加对应的配置：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
------- ---------------
-------- -
-------- ---------------------
-
--
-
----- ---------
---- ---------------- -------------
-
-
-
--步骤六：创建 index.html 文件
在 src 目录下，我们需要创建一个 index.html 文件，在此文件中引用打包后的文件。
-- -------------------- ---- ------- ---- -------------- --- --------- ----- ----- ---------- ------ ----- ---------------- --------------- -- ------ ---- ---------- ------------ ----- ------------------------- ----------------- ------- ------ ---- ----------------- ------- ---------------------------------- ------- -------------------------------- ------- -------
步骤七：创建 chart
在 js/index.js 中，我们来写一个 Highcharts 图表，展示如何使用 jQuery 和 Highcharts：
-- -------------------- ---- -------
-- -----------
------------ -
------------------------- -
------ -
----- -------
--
------ -
----------- ------ ----- ----- ----- ----- -----
----- ----- ----- ----- ------ ------
--
------ -
------ -
----- ------------ --------
-
--
------------ -
------- -
------ -
----------------- -----
-
-
--
------- --
----- --------
----- ----- ---- ---- ----- ----- ----- ----- ----- ----- ----- ----- ----
---
-------- -
-------- -----
-
---
---步骤八：运行 webpack
最后，我们运行 webpack，生成我们需要的打包结果：
# 运行 webpack npx webpack # 打开 index.html 查看效果 open ./dist/index.html
结论
在这篇文章中，我们学习了如何使用 webpack4 来分离 jQuery from Highcharts 的全过程。通过将 jQuery 和 Highcharts 打包成单独的文件，在需要使用这两个库的页面中才引用，可以大大减小项目的体积，提高页面的加载速度，提高用户体验。在实际的项目中，我们也可以使用类似的方法，将页面所需的库文件分离出来，提高项目的性能。
示例代码：https://github.com/flatfisher/webpack-jquery-highcharts
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bea0ed657e1f70dc40661