前言

问题

动态设置 publicpath

为什么会有这个需求？
一些异步的静态资源（例如打包后的 chunk.css，chunk.js），是指向当前请求 server 的地址的，而 不是我们期望的静态资源服务器 ，所以我们要配置publicpath，打包的时候指定请求的静态资源服务器地址。
问题来了：
我们有很多的环境，dev，test，uat，prd，
你总不能发布每个环境前，打不同的 publicpath 包吧？
那么我们就需要动态配置 publicpath
webpack 给我们留了一条后路，
webpack_public_path
按照文档所说，
我们配置下
__webpack_public_path__ = process.env.ASSET_PATH;
然后在 main.js 或者 index.js 的首行代码加载就好了，因为要在加载动态组件之前进行配置。
一般情况下，我们的首行代码为
import App from "./App"
大家也都知道 import 和 require 的区别
import 是 编译时导入，会有“提升现象”

    __webpack_public_path__ = "http://cdn.com";
    import App from "./App" 

实际上在打包编译时为

    import App from "./App" 
    __webpack_public_path__ = "http://cdn.com";

那么组件加载 是在 我们 publicPath 之前，那么我们配置 publicPath 也就失去了意义。
所以 我们变通一下

    // publicpath.js
    __webpack_public_path__ = "http://cdn.com";

这样就解决了

    import  "./publicpath.js" 
    import App from "./App" 

另外上述只是配置 publicpath，动态配置的话 需要 服务器 template 模版将当前环境的静态资源服务器地址配置

<script>
window.publicpath = "http://test.cdn.com"
</script>

    // publicpath.js
    __webpack_public_path__ = window.publicpath;

注意一点，__webpack_public_path__是 webpack 的内部全局参数，而不是 window 对象的属性，所以不要多此一举写成“window.__webpack_public_path__”

使用 typescript 的同学，eslint 会 error，
你改成

    // publicpath.js
    (__webpack_public_path__ as any) = "http://cdn.com";

就不会报错了。

小结