部署应用 | 众里千寻

Webpack 可以与一些插件配合，将构建好的应用部署到各种环境中。

部署到 Github Pages

GitHub Pages 是一个非常流行的静态网站托管平台。gh-pagesopen in new window 这个工具可以帮助我们快速的将静态网站部署到 GitHub Pages 上。

我们先安装 gh-pages

npm add gh-pages --develop

package.json

{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}

1
2
3
4
5

GitHub Pages 对于托管的静态网站有一些规则约定，我们需要修改 output.publicPath，是的能正确的加载静态资源。如果不设置 publicPath 的话，默认会从网站根目录加载静态资源。

publicPath 可以帮助我们控制应用从哪里加载静态资源。如果我们将静态资源都托管在 CDN 上，则 publicPath 应该调整为 CDN 上资源的存放地址。

在我们的例子中，我们设置如下：

webpack.config.js

const productionConfig = merge([
  {
    output: {
      // publicPath: "/",
      // 将 publicPath 修改为项目名称
      publicPath: "/webpack-demo/",

    },
  },
  ...
]);

1
2
3
4
5
6
7
8
9
10
11

执行 npm run build 和 npm run deploy 之后，我们就将项目的 /dist 目录部署到了 GitHub Pages 上，通过 https://<name>.github.io/<project> 就可以访问到我们的静态站点内容。

部署到其他环境

除了使用工具部署应用，我们还可以借助于 Webpack 来部署。

webpack-deployopen in new window 是一个部署工具集合，本身可以脱离 Webpack 独立使用。
webpack-s3-pluginopen in new window 将资源部署到 Amazon。
ssh-webpack-pluginopen in new window 通过 SSH 协议来部署资源。

动态修改 `output.publicPath`

有些时候，output.publicPath 我们无法预先确定，也就无法写在配置文件里。我们可以通过下面的方法在应用代码中指定。

在应用的入口添加 __webpack_public_path__ = window.myDynamicPublicPath;，在合适的时候给这个变量赋值。
将 Webpack 配置中的 output.publicPath 删除。
如果使用了 ESLint，那么需要添加全局变量声明，避免静态检查错误。globals.__webpack_public_path__: true。

当构建的时候， Webpack 会使用 __webpack_public_path__ 来加载模块。

总结

尽管 Webpack 不是一个部署工具，但通过一些插件，Webpack 可以实现部署的功能。

我们可以动态的修改 output.publicPath 配置来在非编译期确定静态资源的地址。这个方法内部是基于 __webpack_public_path__ 这个全局变量来实现的。

关注微信公众号，获取最新推送~

加微信，深入交流~

# 部署到 Github Pages

# 部署到其他环境

# 动态修改 output.publicPath

# 总结

部署到 Github Pages

部署到其他环境

动态修改 `output.publicPath`

总结