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

时间 2019-12-07

标签开始构建 webpack 项目 book 翻译繁體版

原文原文链接

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

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

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

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

创建项目

首先，你应该为项目建立一个目录并在那里新建 package.json。 npm 使用它来管理项目依赖。如下是基本命令：node

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

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

T> 你能够在 ~/.npmrc 中设置 npm init 的默认值。git

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

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

安装 Webpack

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

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

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 输出，咱们应该解决这两个问题：

在 src/index.js 写入 console.log("Hello world");。
执行 node_modules/.bin/webpack --mode development。Webpack 按设置查找源文件。
查看 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",
    }),
  ],
};

配置完成后，尝试如下操做：

运行 node_modules/.bin/webpack --mode production 构建项目。你也能够试试 development 模式。
运行 cd dist 进入构建目录。
使用 serve（npm i serve -g）或相似工具运行服务器。
经过浏览器查看结果。但愿结果如你所愿~

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 一章中，你将了解如何使用它生成多个独立的页面。
使用 npm package.json 脚原本管理 webpack 很方便。你能够将它用做轻型任务运行器，也可使用于 webpack 以外的其余功能。

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