(踩坑回忆录)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模版将当前环境的静态资源服务器地址配置

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

就不会报错了。

固定打包内容中的1.chunk.js

小结