(踩坑回忆录)webpack踩坑记录

前言

问题

动态设置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模版将当前环境的静态资源服务器地址配置

    // 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";

就不会报错了。

小结