JavaScript 中的模块如何打包运行（二）

选项 5: webpack-library 法。为什么不把 change.js 中的 changeTimeFormat() 函数做成一个库函数，以便分发、调用、部署呢？ 也是可以的。 步骤如下：

- 创建一个目录 src，将 change.js 移入，将 change.js 重命名为 index.js 。

- 执行 npm init -y，会生成一个 package.json。修改，将其内容变为：

其中，"main": "dist/table-modification.js" 指定由 webpack 打包得到的 JavaScript 函数库会放在 dist/table-modification.js 文件中，用的时候将其包含进来就可以。

- 创建一个叫做 webpack.config.js 的文件，内容如下：

其中，entry: "./src/index.js" 表示打包的入口文件是 src 目录下面的 index.js，这在第一步时已经创建。

library 选项中的 name 设置库的名字为 tableModification。

- 执行 npm run build，会发现新增了一个 dist 目录，该目录下面有一个文件叫做 table-modification.js，其由 webpack 自动生成。

- 现在就可以使用这个库了。在 index.html 添加如下代码：

第一个 <script> 标签包含了库文件 table-modification.js。 第二个标签中，使用 tableModification.changeTimeFormat() 去调用库函数，其中 tableModification 是库的名字，而 changeTimeFormat 是库中函数的名字。打开 index.html，可以正确运行。

目录树结构：