webpack打包后资源访问错误的问题

Question

打包后的文件部署到服务器的二级目录下

└─static
    ├─css
    ├─fonts
    ├─imgs
    ├─js
└─index.html

在index.html中用如下方式引用了静态文件
<script src="/static/js/jQuery.min.js"></script>
这样在服务器上的路径就变为了
http://localhost/static/js/jQuery.min.js
而生产环境下实际还有一个二级目录 web，正确路径为
http://localhost/web/static/js/jQuery.min.js
查了一些资料，说是要配置output中的publicPath
可是并没有效果，index.html中如何写这个引用地址才对呢？
由于不知道最终使用哪个ip地址，所以绝对路径在这之前是不知道的，
请问webpack怎么处理这种情况呢？

Answer 1

1. Webpack 的设计思路是：由 webpack 管理一切资源。所以如果你想保证资源能被正确加载，应该尽量在项目中用 import 'xxxx' 加载，而不是手动写在 html 里。
2. 因为所有资源都由 webpack 处理，所以除非你整个项目都在 /web/ 下面，不然设置 publicPath 会出问题

所以你的问题大概有三种解：

1. 如果引用的是开源仓库，可以考虑用公共 CDN，比如 jQuery，官网就推荐 https://code.jquery.com/
2. 如果希望自己处理，可以 import 进来，然后通过 chunckPlugin 配置把它单独打包
3. 如果想手动处理，建议好好理解一下打包后的路径，然后配置