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

选项 3: module-src-export-import 法

这是选项 2 的一个变种，将 index.html 中 < script type="module"> ... </script> 之间的 JavaScript 代码移到 index.js 中。然后，在 index.html 中，包含 index.js。

    < script type="module" src="index.js"></script>

注意：不要忘记了 type="module" 。

选项 4: webpack-bunlde-src 法

将所有的 JavaScript 文件打包成一个 JavaScript 文件使用。

- 创建一个目录 src， 将 index.js 与 change.js 移入。

- 执行 npm init -y，此时会生成 package.json。

- 执行 npx webpack， 此时会新增一个 dist 目录，里面包含 main.js。这个 main.js 就是 webpack 将 index.js 与 change.js 打包（bundle）在一起，然后最小化的 JavaScript 文件，可以直接包含进来用。可以发现，main.js 文件小于 index.js 与 change.js 文件大小之和，可见 webpack 做了最小化。

- 将 index.html 移入 dist 目录，将 < script type="module" src="index.js"></script> 修改为 < script src="main.js"></script>。 打开 index.html， 显示正确结果。

目录树结构：

    package.json

    src/

      - index.js

      - change.js

    dist/

      - main.js

      - index.html