使用 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
选项用来存档文件。方法如下:
- 将旧版本的站点复制到临时目录中,然后删除其中的 archive 目录。您可以根据需要命名 archive 目录。
- 清理并构建项目。
- 将旧版本的站点复制到 _build/archive/_下面
- 运行 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
,可以根据环境按照以下步骤解决此问题:
- 在应用程序的入口点设置
__webpack_public_path__ = window.myDynamicPublicPath;
,并按照你希望的方式解析它。 - 从 Webpack 配置中删除
output.publicPath
设置。 - 如果您使用的是 ESLint,请在 lint 规则中设置
globals.__webpack_public_path__: true
,以忽略对全局变量的检查。
编译时,Webpack 会获取 __webpack_public_path__
并重写它,使其符合 Webpack 执行逻辑。
总结
尽管 Webpack 不是部署工具,您也可以找到相关的插件。
回顾一下:
- 可以在 Webpack 之外解决部署问题,例如,通过 npm 脚本实现此目的。
- 您可以动态配置 Webpack 的
output.publicPath
。如果您在编译时不知道output.publicPath
或者希望稍后再决定它,那么这种技术很有用。这可以通过__webpack_public_path__
全局变量来实现。