Webpack-publicPath

Posted 2023-04-13

参考技术A 实验是检验用法的最好途径，于是设置目录结构如下：
src
|---index.html
|---index.js
|---asssets
    |----1.jpg

目的是将脚本打包到一个统一的dist文件夹下。

使用webpack-dev-server重新打包并打开index.html时，报错如下：

为什么找不到呢？

这时你需要在devServer中添加publicPath属性：

重新使用webpack-dev-server打包，并打开index.html你会发现，找到了bundle.js。但是仍旧提示找不到图片

所以，此时devServer.pulicPath属性的含义可以这么理解：

可为什么找不到图片呢？先回味一下官方原文

也就是说：如果你require了一些资源或直接引用了网络上的资源，这些资源里包含uri属性（如css中设置img：url('./1.jpg')），就要使用就这个属性，否则会找不到文件。（如果没有使用uri资源,那么这个属性没什么用）。
说人话---这个属性就是让webpack在打包时才能根据配置动态修改uri中的相对值的；你不配置，webpack打包后的bundle.js中引用的url不对。

于是再去配置output下的publicPath，将其修改为

重新执行webpack-dev-server，打开index.html发现一切正常！

后来尝试，不配置webserver.publicPath，而只配置output中的publicPath且修改为：

重新执行webpack-dev-server，打开index.html发现一切正常！
难道我对webserver.publicPath的理解有错？
比较了加与不加时，控制台打印出的日志才明白：

如何用js将一个<span>中的内容加入到另一个<span中>

<span id="span1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</span>
<span id="span2">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</span>如何用js将span2中的内容加到span1中
只用js

参考技术A var text2 = $("#span2").text();
$("#span1").text(text2 ); 参考技术B span1.innerHTML += span2.innerHTML;

本回答被提问者采纳