Webpack book （developing） - Getting Started

这一部分是基础，后续内容都是在本章的基础上进行扩展。

主要内容：

• 启动并运行 webpack；
• 安装 web-dev-server。

在开始之前，请确保你使用的是最新版本的Node。 应该至少使用最新的LTS（长期支持）版本。本书的配置考虑了 LTS Node 所包含的功能。同时你的终端还应该支持 node 和 npm 命令。也可以利用 Yarn 来代替 npm，同样适用于本教程。

配置项目

首先运行基本指令，为项目创建一个目录并配置 package.json，利用 npm 来管理项目依赖项。

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

你也可以手动生成的 package.json 以对其进行更改。 官方文档更详细地解释了package.json 选项。

安装 Webpack

尽量避免全局安装 Webpack （npm install webpack -g），但最好将其作为项目的依赖项进行维护。这样你可以控制正在运行的版本，从而避免问题。

这种方法同样也适用于持续集成（CI）设置。 CI系统可以安装本地依赖项，使用它们编译项目，然后将结果推送到服务器。

执行以下命令，将 webpack 添加到项目中

npm install webpack webpack-cli --save-dev
复制代码

安装成功之后，在 package.json 的 devDependencies 中会出现一个 webpack 项。除了在 node_modules 目录下安装了软件包之外，npm 也会为可执行文件生成一个入口。

可以用 --save-dev 和 --save 来区分应用和开发的依赖项。使用前者会写入 package.json 的 dependencies 字段，而后者则会写到 devDependencies 中。

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

执行Webpack

你可以使用 npm bin 来获取可执行文件的绝对路径。一般为 ./node_modules/.bin。

npm bin // C:\Users\Gepangz\Desktop\webpack-demo\developing\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 没有找到可编译的资源。并且 WARNING 还提示缺少参数 mode ，它主要用来区分开发环境和生产环境。

为了使得 webpack 能够成功运行，我们应该解决这两个问题：

console.log("Hello world")
node_modules/.bin/webpack --mode development

尝试使用 --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 ，检查输出 dist/ 目录。你应该看到 Webpack 写入 dist 目录的 main.js 中打包了 src 中的两个模块。

要使输出更清晰，请将 --devtool false 参数传递给 Webpack。 默认情况下，Webpack 将生成基于 eval 的源映射，这样做会禁用该行为。 有关详细信息，请参阅。

但仍存在一个问题。 我们如何在浏览器中测试应用程序？

安装 Configuring html-webpack-plugin 插件

可以通过编写，并引入生成的文件的 index.html 文件来解决该问题。 但是我们可以使用插件和 Webpack 配置来实现这一目标，而不是自己做。

首先，安装 html-webpack-plugin

npm install html-webpack-plugin --save-dev
复制代码

连接该插件和 webpack，在与 package.json 同级的目录上，创建 webpack.config.js 文件。

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. 通过 Web 浏览器检查结果。 你应该看到 src 内脚本的内容。

检查输出

如果你执行 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] 占位符使资源无效。具体见 添加 Hashes 到文件名中 ；
• Version: webpack 4.1.1 - Webpack 的版本；
• Time: 338ms - 打包所需时间；
• main.js 679 bytes 0 [emitted] main - 生成的资源的名，大小，与其相关块的ID，生成方式的状态信息，块的名称；
• index.html 181 bytes [emitted] - 另一个资源的打包过程；
• [0] ./src/index.js + 1 modules 219 bytes {0} [built] - 资源的 ID，文件名，大小，入口块 ID，打包方式；
• Child html-webpack-plugin for "index.html" - 这是与插件相关的输出。 在这种情况下，html-webpack-plugin自己创建这个输出。

仔细检查 dist/ 目录下面的打包后的文件。如果仔细观察，可以在源代码中看到相同的 ID。

除了配置对象之外，webpack 还接受一系列配置。 甚至还可以返回 Promise并最终解析为配置。

如果你想要一个替代 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 。

你可以通过 npm run 执行此类脚本，并且可以在项目中的任何位置使用。如果仅运行 npm run ，终端中就会罗列出可用脚本。

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

HtmlWebpackPlugin 扩展

虽然你可以用自己的模板来代替 HtmlWebpackPlugin 模板，也可以采用一些有预制模板的插件，例如 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；
• resource-hints-webpack-plugin - 向你的 HTML 文件添加资源提示来减少加载时间；
• preload-webpack-plugin - 为脚本启用 rel = preload 功能并帮助延迟加载，详情请见Building；
• webpack-cdn-plugin - 提供将指定内容分发到 CDN 的功能，常用于快速前端库、框架的加载速度；
• dynamic-cdn-webpack-plugin - 与 webpack-cdn-plugin 大体相同。

总结

现在你已经设法启动并运行webpack，但它还没有那么多功能。而且它用来开发应用程序也是比较痛苦，因为每次开发完应用程序的时候，都必须要 npm run build ，然后再刷新游览器。所以，我们要着手使用 webpack 更高级的功能。