Webpack 教程:部署應用

Webpack 可以與一些插件配合，將構建好的應用部署到各種環境中。

部署到 Github Pages

GitHub Pages 是一個非常流行的靜態網站託管平臺。gh-pages 這個工具可以幫助我們快速的將靜態網站部署到 GitHub Pages 上。

我們先安裝 gh-pages

npm add gh-pages --develop
package.json
{  "scripts": {    "deploy": "gh-pages -d dist"  }}
GitHub Pages 對於託管的靜態網站有一些規則約定，我們需要修改 output.publicPath，是的能正確的加載靜態資源。如果不設置 publicPath 的話，默認會從網站根目錄加載靜態資源。
publicPath 可以幫助我們控制應用從哪裡加載靜態資源。如果我們將靜態資源都託管在 CDN 上，則 publicPath 應該調整為 CDN 上資源的存放地址。
在我們的例子中，我們設置如下：

webpack.config.js
const productionConfig = merge([  {    output: {      // publicPath: "/",      // 將 publicPath 修改為項目名稱      publicPath: "/webpack-demo/",
    },  },  ...]);
執行 npm run build 和 npm run deploy 之後，我們就將項目的 /dist 目錄部署到了 GitHub Pages 上，通過 https://<name>.github.io/<project> 就可以訪問到我們的靜態站點內容。
部署到其他環境
除了使用工具部署應用，我們還可以藉助於 Webpack 來部署。
webpack-deploy 是一個部署工具集合，本身可以脫離 Webpack 獨立使用。
webpack-s3-plugin 將資源部署到 Amazon。
ssh-webpack-plugin 通過 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__ 這個全局變量來實現的。