webpack学习教程之publicPath路径问题详解

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build")
 }

<body>
 <script src="/UploadFiles/2021-04-02/b.js">

如果有指定publicPath


output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build"),
  publicPath:"/assets/"
 }


则引入如下


<body>
 <script src="/UploadFiles/2021-04-02/b.js">

webpack-dev-server环境下，path、publicPath、区别与联系


path：指定编译目录而已（/build/js/），不能用于html中的js引用。


publicPath：虚拟目录，自动指向path编译目录（/assets/ => /build/js/）。html中引用js文件时，必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


发布至生产环境：


1.webpack进行编译（当然是编译到/build/js/）


2.把编译目录（/build/js/）下的文件，全部复制到/assets/目录下（注意：不是去修改index.html中引用bundle.js的路径）
之前因为publicPath的路径错误原因，导致webpack-dev-server不能自动刷新
总结
以上就是这文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对的支持。