资讯专栏INFORMATION COLUMN

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

wangzy2019 / 3390人阅读

摘要:通过使用,或等方案,可以获得更加可控的环境。使用它来管理项目依赖。前者安装并写入字段,而后者则写入。先安装在中使用配置完成后,尝试以下操作运行构建项目。运行进入构建目录。本地依赖项也适用于持续集成环境。

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

在开始之前,请确保你使用的是 Node 的最新版本。至少是最新的 LTS(长期支持)版本,本书的配置基于 LTS 版本所写,你的终端需要有 nodenpm 命令,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 附带了其他功能,包括initmigrate命令,可以快速创建新的 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 进入构建目录。

使用 servenpm 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 startnpm 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 之外的其他功能。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108238.html

相关文章

  • 什么是 Webpack?【Webpack Book 翻译

    摘要:资源哈希编码使用可以为每个包的名称注入一个哈希值例如,,以便在版本更新后使客户端上旧版本的包无效重新下载。如此受人喜爱的原因之一是热模块更换。可以为文件名生成哈希值,在内容更改时,可以作废浏览器缓存中上个版本的包。 原文链接:https://survivejs.com/webpack...翻译计划:https://segmentfault.com/a/11... 涉及到的未翻译单词 ...

    tainzhi 评论0 收藏0
  • Loader 入门【Webpack Book 翻译

    摘要:把他设置为以在其他之前或之后进行处理。基于布尔值的字段可用于进一步进行约束不匹配给定条件参见表示接受的值。同时匹配一系列条件。将此添加到你的配置即可检查其中的数据流,而不必在中插入。 原文链接:https://survivejs.com/webpack...翻译计划:https://segmentfault.com/a/11...附言:因为发现书中一些内容单独放出来会比较尴尬,所以会跳...

    yeyan1996 评论0 收藏0
  • Webpack2 升级指南和特性摘要

    摘要:名称后自动自动补全的功能将被移除在配置时,官方不再允许省略扩展名,的配置写法上将逐步趋于严谨。使用自定义参数作为配置项传入方式将做调整如果你随意将自定义参数通过传入到配置项中,如你会发现这将不会被允许,的执行将会遵循更为严格的标准。 历时多日,webpack2.2正式版终于赶在年前发布了,此次更新相对于1.X版本有了诸多的升级优化改进,笔者也在第一时间查阅了官方的文档,整理和翻译了由w...

    Forelax 评论0 收藏0
  • 前端通用国际化解决方案

    摘要:前端通用国际化解决方案背景前端技术日新月异,技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。 文章首发于个人blog,欢迎大家关注。 DI18n 前端通用国际化解决方案 背景 前端技术日新月异,技术栈繁多。以前端框架来说有React, Vue, Angular等等,再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...

    lingdududu 评论0 收藏0
  • webpack原理

    摘要:原理查看所有文档页面前端开发文档,获取更多信息。初始化阶段事件名解释初始化参数从配置文件和语句中读取与合并参数,得出最终的参数。以上处理的相关配置如下编写编写的职责由上面的例子可以看出一个的职责是单一的,只需要完成一种转换。 webpack原理 查看所有文档页面:前端开发文档,获取更多信息。原文链接:webpack原理,原文广告模态框遮挡,阅读体验不好,所以整理成本文,方便查找。 工作...

    trigkit4 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<