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

部署到 Github Pages

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

我们先安装 gh-pages

npm add gh-pages --develop
1

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 buildnpm run deploy 之后,我们就将项目的 /dist 目录部署到了 GitHub Pages 上,通过 https://<name>.github.io/<project> 就可以访问到我们的静态站点内容。

部署到其他环境

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

动态修改 output.publicPath

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

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

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

总结

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

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

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