Tim的资源站

使用 Webpack 构建的项目可以部署到各种环境中。可以使用 gh-pages 包将不依赖后端的公共项目推送到 GitHub 页面上。此外，还有各种针对其他环境的 webpack 插件，例如S3。

使用 gh-pages 进行部署

gh-pages 允许您轻松地在 GitHub 页面上托管独立应用程序。首先必须让它指向构建目录，以获取内容并将它们推送到 gh-pages 分支上。

该包也支持其他服务，例如从 Git 存储库部署。在实践中，您可能会有更复杂的设置，比方说通过持续集成系统将结果推送到另一个服务。

设置 gh-pages

首先，安装依赖：

npm install gh-pages --save-dev

您还需要 _package.json 中添加脚本：

package.json

"scripts": {

  "deploy": "gh-pages -d build",

  ...
},

要使资源路径在 GitHub 页面上生效，必须调整 output.publicPath 字段。否则，资源路径总是指向根，除非您是在某个域名（比方说 timsrc.com）下部署应用，否则这不起作用。

您可以通过 publicPath 控制在 index.html 中看到的结果网址。如果您在 CDN 上托管资源，也应该在这里调整。

在这个例子中，将其设置为指向 GitHub 项目就足够了，如下所示：

webpack.config.js

const productionConfig = merge([
  {
    ...
    output: {
      ...

      // publicPath: "/",


      // 按照你的 GitHub 项目相应调整
      publicPath: "/webpack-demo/",

    },
  },
  ...
]);

在构建（npm run build）和部署（npm run deploy）之后，你的应用程序就已经在 GitHub 上部署了。假设一切顺利的话，你就可以通过 https://<name>.github.io/<project> 访问它了。

如果您需要更精细的设置，请使用 gh-pages 提供的 Node API 。但是，它提供的默认命令行工具足以满足基本用途了。

GitHub Pages 允许您选择部署的分支。即使对于不需要打包的小站点来说，我们也可以使用 master 分支。您还可以使用 master 分支下的 ./docs 目录，并在此维护您的站点。

存档旧版本

gh-pages 提供了 add 选项用来存档文件。方法如下：

1. 将旧版本的站点复制到临时目录中，然后删除其中的 archive 目录。您可以根据需要命名 archive 目录。
2. 清理并构建项目。
3. 将旧版本的站点复制到 _build/archive/_下面
4. 运行 Node 脚本调用 gh-pages，并使用回调捕获可能出现的错误，如下所示：

ghpages.publish(path.join(__dirname, "build"), { add: true }, cb);

部署到其他环境

尽管您可以在 Webpack 之外处理部署问题，但是有一些特定于 Webpack 的实用程序可以派上用场：

• webpack-deploy 是部署实用程序的集合，甚至可以在 Webpack 之外工作。
• webpack-s3-sync-plugin 和 webpack-s3-plugin 将资源同步到亚马逊。
• ssh-webpack-plugin 专为通过SSH 部署而设计。
• now-loader 在资源层级上运行，并允许您将特定资源部署到 Now 托管服务。

要访问生成的文件及其路径，请考虑使用 assets-webpack-plugin。该插件会返回路径信息，使您在部署时能够将 Webpack 与其他环境集成。

要确保在部署新版本后依赖旧版捆绑包的客户端仍然有效，请不要删除旧文件，直到它们不再被需要。您可以对部署时要删除的内容执行特定检查，而不是删除每个旧资源。

动态解析 output.publicPath

如果您事先不知道 publicPath，可以根据环境按照以下步骤解决此问题：

1. 在应用程序的入口点设置 __webpack_public_path__ = window.myDynamicPublicPath;，并按照你希望的方式解析它。
2. 从 Webpack 配置中删除 output.publicPath 设置。
3. 如果您使用的是 ESLint，请在 lint 规则中设置 globals.__webpack_public_path__: true，以忽略对全局变量的检查。

编译时，Webpack 会获取 __webpack_public_path__ 并重写它，使其符合 Webpack 执行逻辑。

总结

尽管 Webpack 不是部署工具，您也可以找到相关的插件。

回顾一下：

• 可以在 Webpack 之外解决部署问题，例如，通过 npm 脚本实现此目的。
• 您可以动态配置 Webpack 的 output.publicPath。如果您在编译时不知道 output.publicPath 或者希望稍后再决定它，那么这种技术很有用。这可以通过__webpack_public_path__ 全局变量来实现。