webpack 的体验

图片

什么是 webpack？

把一些 javascripts 代码打包成一个文件，在这个过程中还能通过插件定制一些编译过程。

---

如何运行 webpack？

用 npm 安装 webpack 和 webpack-cli 到开发依赖，用命令行 webpack 运行，webpack.config.js 是运行配置。

---

举个例子。

创建 src.js，运行 webpack，将生成 dist/main.js。src.js 是入口文件，dist/main.js 是发布脚本。每个入口文件都会打包成一个发布脚本。发布脚本的内容由入口文件和编译插件等配置决定。可以在入口文件里用一些标准导入其他脚本，例如使用 es6 的 import，这样就可以让项目的模块化程度变好。

---

dist/main.js 看不懂。

配置 mode 为 development，则不会混淆打包的代码，这样就更能看懂一些。默认的 mode 是 production，它会混淆、压缩代码。

---

如何定义入口文件位置？

配置 entry 为一个字符串，则它是唯一一个入口文件的路径；配置 entry 为一个对象，则每个项的值是一个入口文件的路径。入口文件路径一般以 ./ 开始，当前目录是项目根目录。

---

如何定义发布脚本位置？

假设 src/db.js 定义了 dbCtrl，并且导出了它：export { dbCtrl }。src/main.js 通过 import 导入：import { dbCtrl } from "./db"。