部署应用

使用 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 的实用程序可以派上用场:

要访问生成的文件及其路径,请考虑使用 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__ 全局变量来实现。
用户头像
登录后发表评论