前端打包二三事在前端的开发过程中，开发项目编码是必须的能力，但是开发之后的上线也是不可缺少的技能 -- 打包。

这是我参与更文挑战的第2天，活动详情查看：更文挑战

在前端开发过程中，开发项目编码是必须的能力，但是开发之后的上线也是不可缺少的技能 -- 打包。

为什么需要打包

编译 ES6 语法特性，编译 JSX，编译 TS 等（浏览器无法直接执行）
整合资源，例如图片，外部样式文件，Less/Scss
优化代码体积：去除空格、去除不必要的代码、缩短变量名

使用 webpack 进行打包

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，用于整合项目中所有的资源。

当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。从入口开始，webpack 会递归的构建一个依赖关系图，这个依赖图包含着应用程序中所需的每个模块，然后通过插件的方式载入对应的 loader，比如 js-loader、css-loader 等，最终会将所有模块打包为少量的 可由浏览器加载的 bundle（通常只有一个）。

关于依赖图

每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为依赖提供给应用程序。

关于 loader

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

借助脚手架

webpack 复杂的配置和设计，给前端的小朋友们增大了心智负担。其实已经有很多的脚手架工具已经帮忙完成了 webpack 在通常情况下的最佳配置。执行一行命令 -- npm run build 就可以完成打包。

打包注意事项

设置 nodejs 环境为 production。 很多 js library 在开发模式（development）和生产模式（production）表现是不一样的，比如类型检查、错误提示等

禁用开发时专用代码

if (process.env.NODE_ENV === "developement") {
  // 开发时专用代码
}

设置应用根路径 项目打包后是要运行在一个域名之下的，可能是运行在根域名下，也有可能运行在某个子域名下或根域名的某个目录下，或者把资源都部署在 CDN 上，我们需要告诉应用去哪里加载资源。

通过配置 package.json 的 homepage 字段可以确定构建的 HTML 文件中的根 URL 。
```
// 对于 GitHub 用户页面
"homepage": "https://myusername.github.io",
// 或者
"homepage": "https://myusername.github.io/my-app",
// 或者对于自定义域页面：
"homepage": "https://mywebsite.com",
```
打包后的资源路径就会加上 homepage（比如，https://myusername.github.io/my-app）的地址。

前端打包二三事