从 0 开始构建 webpack 项目【Webpack Book 翻译】

原文链接：https://survivejs.com/webpack...
翻译计划：https://segmentfault.com/a/11...

在开始之前，请确保你使用的是 Node 的最新版本。至少是最新的 LTS（长期支持）版本，本书的配置基于 LTS 版本所写，你的终端需要有 node 和 npm 命令，Yarn 也是一个不错的选择，也适用于本教程。

通过使用 Docker，Vagrant 或 nvm 等方案，可以获得更加可控的环境。Vagrant 可以为团队中每个开发人员提供统一的环境，但它因依赖于虚拟机，性能稍处劣势。

T> 本书的完整配置可在 GitHub 上找到。

建立项目

首先，你应该为项目创建一个目录并在那里新建

package.json

。 npm 使用它来管理项目依赖。以下是基本命令：

mkdir webpack-demo cd webpack-demo npm init -y # -y generates *package.json*, skip for more control

生成

package.json

后，你可以手动对其进一步更改。官方文档更详细地解释了 package.json选项。

T> 你可以在

~/.npmrc

中设置 npm init 的默认值。

T> 这是使用 Git 进行版本控制的绝佳机会。你可以为每个步骤/每一章节创建一个 commit，这样你可以轻松做到回滚。

T> 本书的例子使用 Prettier 进行格式化。使用选项为 "trailingComma": "es5", 和`"printWidth": 68，这样可以使 diff 看起来更舒服，更适合页面展示。

安装 Webpack

即使可以全局安装 webpack（npm install webpack -g），最好还是将它作为项目的依赖项来维护，以避免出现因为不同版本带来的意外问题。该方法也适用于持续集成（CI）设置。 CI 系统可以安装本地依赖项，使用它们编译项目，然后将结果推送到服务器。

要将 webpack 添加到项目中，请执行：

npm install webpack webpack-cli --save-dev # -D to type less

你应该可以在你的

package.json

文件中 devDependencies 部分看到 webpack。除了在

node_modules

目录下本地安装软件包之外，npm 还会为可执行文件生成一个 entry。
You should see webpack at your

package.json

devDependencies section after this. In addition to installing the package locally below the 

node_modules

directory, npm also generates an entry for the executable.

T> 你可以使用 --save 和 --save-dev 来分离应用程序和开发依赖项。前者安装并写入

package.json

dependencies字段，而后者则写入 devDependencies。

T> webpack-cli 附带了其他功能，包括init和migrate命令，可以快速创建新的 webpack 配置或从旧版本更新版本。

执行 Webpack

你可以使用 npm bin 显示可执行文件的确切路径。它很有可能指向

./node_modules/.bin

。尝试使用 node_modules/.bin/webpack 或类似命令从终端运行webpack。

运行后，你应该能看到版本号，一条指南链接以及一个选项列表。大多数的选项都没有在这个项目中使用，但了解一下也是极好的。

$ node_modules/.bin/webpack Hash: 6736210d3313db05db58 Version: webpack 4.1.1 Time: 88ms Built at: 3/16/2018 3:35:07 PM WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. ERROR in Entry module not found: Error: Can't resolve './src' in '.../webpack-demo'

这段输出说明 webpack 找不到需要编译的源代码。同时它还缺少一个 mode 参数判定运行环境。

为了快速了解 webpack 输出，我们应该解决这两个问题：

1. 在src/index.js写入 console.log("Hello world");。

2. 执行 node_modules/.bin/webpack --mode development。Webpack 按设置查找源文件。

3. 查看dist/main.js。你应该看到 webpack 的引导代码，在引导程序下面，你应该可以看到 console.log("Hello world");。

T> 尝试添加 --mode production 看返回值有什么不同。

准备资源

我们尝试做复杂一点的构建，在项目中添加另一个模块，逐步开发一个小应用：

src/component.js

export default (text = "Hello world") => {   const element = document.createElement("div");   element.innerHTML = text;   return element; };

我们还必须修改入口文件，导入新文件，通过 DOM 渲染应用程序：

src/index.js

import component from "./component"; document.body.appendChild(component());

构建后查看输出文件（node_modules/.bin/webpack --mode development）。你应该看到 webpack 已将两个模块写入 dist 目录的 bundle。

默认情况下，Webpack 将生成基于 eval 的 source maps，它会让输出显得很混乱，可以把 --devtool false 参数传递给 webpack 禁用该行为。详细信息请参阅

Source Maps

章节。

还有一个问题，我们如何在浏览器中测试应用程序？

配置 html-webpack-plugin

可以通过编写指向生成的文件的

index.html

文件来解决该问题。我们无需手动完成这件事，而是借助插件和 webpack 配置来完成此操作。

先安装

html-webpack-plugin

：

npm install html-webpack-plugin --save-dev

在 webpack 中使用 plugins：

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = {   plugins: [     new HtmlWebpackPlugin({       title: "Webpack demo",     }),   ], };

配置完成后，尝试以下操作：

1. 运行 node_modules/.bin/webpack --mode production 构建项目。你也可以试试 development 模式。

2. 运行 cd dist 进入构建目录。

3. 使用 serve（npm i serve -g）或类似工具运行服务器。

4. 通过浏览器查看结果。希望结果如你所愿~

T> 本书使用 Trailing commas（尾逗号），这样做 diff 会更清晰简洁。

查看输出

现在执行 node_modules/.bin/webpack --mode production，应该看到如下输出：

Hash: aafe36ba210b0fbb7073 Version: webpack 4.1.1 Time: 338ms Built at: 3/16/2018 3:40:14 PM      Asset       Size  Chunks             Chunk Names    main.js  679 bytes       0  [emitted]  main index.html  181 bytes          [emitted] Entrypoint main = main.js    [0] ./src/index.js + 1 modules 219 bytes {0} [built]        | ./src/index.js 77 bytes [built]        | ./src/component.js 142 bytes [built] Child html-webpack-plugin for "index.html":      1 asset     Entrypoint undefined = index.html        [0] (webpack)/buildin/module.js 519 bytes {0} [built]        [1] (webpack)/buildin/global.js 509 bytes {0} [built]         + 2 hidden modules

这段输出的信息量很大：

• Hash: aafe36ba210b0fbb7073--当前构建的哈希。使用它来通过 [hash] 占位符使旧版本资源无效。 填充哈希值将在Adding Hashes to Filenames章节中详细讨论。

• Version: webpack 4.1.1--Webpack版本。

• Time: 338ms--执行构建所花费的时间。

• main.js 679 bytes 0 [emitted] main--生成资源的名称，大小，与其相关的 chunks 的 ID，状态信息，生成方式以及名称。

• index.html 181 bytes [emitted]--进程生成的另一个资源。

• [0] ./src/index.js + 1 modules 219 bytes {0} [built]--入口资源的 ID，名称，大小，entry chunk ID，生成方式。

• Child html-webpack-plugin for "index.html":--这是与插件相关的输出。此输出为html-webpack-plugin创建。

查看 dist/ 目录下面的输出。如果仔细观察，可以在代码中看到相同的 ID。

T> webpack 配置除对象外，也可以通过返回一个 Promise 并最终 resolve 返回配置信息。

T> 如果不想使用

html-webpack-plugin

，可以尝试功能较少但更好理解的 mini-html-webpack-plugin。

添加构建快捷方式

执行 node_modules/.bin/webpack 显得过于冗长，我们应该为此提供一个快捷入口。修改

package.json

：

package.json

"scripts": {   "build": "webpack --mode production" },

运行 npm run build 应该能看到与之前相同的输出。npm 会自动将

node_modules/.bin

添加到路径中。因此，你不必这么写 "build": "node_modules/.bin/webpack"，而直接是 "build": "webpack"。

你可以通过

npm run

执行此类脚本，并且可以在项目中的任何位置使用

npm run

。如果直接运行

npm run

，它将为你提供可用脚本的列表。

T> 还有像

npm start

和

npm test

这样的快捷方式。你可以在不使用

npm run

的情况下直接运行它们（尽管也可以）。如果你甚至可以懒到使用

npm t

来运行测试。

T> 更进一步，还可以使用终端配置中的 alias 命令设置系统级别名。例如将 nrb 映射到 npm run build。

HtmlWebpackPlugin 扩展

你可以自己写 HtmlWebpackPlugin 的 template，但有这里也有一些预设模板，如 html-webpack-template 或 html-webpack-template-pug。

还有一些插件可以扩展 HtmlWebpackPlugin 的功能：

• favicons-webpack-plugin 能够生成favicon。

• script-ext-html-webpack-plugin 使你可以更好地控制 script 标记，并允许你进一步调整脚本加载。

• style-ext-html-webpack-plugin 将 CSS 引用转换为内联 CSS。该技术使 CSS 成为初始加载的一部分，可以快速向客户端提供关键 CSS。

• resource-hints-webpack-plugin 添加 resource hints 到你的HTML文件，以加快加载时间。

• preload-webpack-plugin 为脚本启用 rel=preload 功能，对懒加载比较使用，本书Building部分将会讨论到。

• webpack-cdn-plugin 允许你指定通过内容交付网络（CDN）加载的依赖项。这常用于加速流行库的加载。

• dynamic-cdn-webpack-plugin 功能类似。

总结

虽然你成功运行了 webpack，但这还远远不够，后续开发仍需努力。现在每次要查看应用程序时，都必须使用 npm run build 手动构建，然后刷新浏览器。这个痛点是 webpack 高级功能的用武之地。

回顾一下：

• 本地安装 webpack 比全局安装 webpack 更有优势。这样你可以保证你正在使用的是哪个版本。本地依赖项也适用于持续集成环境。

• Webpack 通过webpack-cli包提供命令行界面。虽然没有配置也可以使用，但任何进阶使用都需要配置。

• 对于更复杂的设置，你很可能需要编写单独的webpack.config.js文件。

• HtmlWebpackPlugin 可用于生成应用程序的 HTML 入口。在Multiple Pages一章中，你将了解如何使用它生成多个独立的页面。

• 使用 npmpackage.json脚本来管理 webpack 很方便。你可以将它用作轻型任务运行器，也可以使用于 webpack 之外的其他功能。

在下一章中，你将学习如何通过启用自动浏览器刷新来改善开发体验。