这次给大家带来Webpack path与publicPath区别使用解析，Webpack path与publicPath区别使用的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
在webpack模块化开发的过程中，发现webpack.config.js配置文件的输出路径总有一个path与publicPath，不解其意。
module.exports = { output: { path: path.resolve("./examples/dist"), filename: "app.js", publicPath: "What should I put here?" } }
登录后复制
正文
官方解释
publicPath: The output.path from the view of the Javascript / HTML page.
从JS/HTML页面来看的输出路径
我的理解
output.path 储存你所有输出文件的本地文件目录。（绝对路径）
举个例子：
path.join(dirname, “build/”)
登录后复制
webpack将会把所有的文件输出到localdisk/path-to-your-project/build/
output.publicPath
你上传所有打包文件的位置（相对于服务器根目录）
path：用来存放打包后文件的输出目录
publicPath：指定资源文件引用的目录
用处：例如在express中，指定了public/dist是网站的根目录，网站的源文件存放在public中，那么就需要设置path:”./dist”指定打包输出到该目录，而publicPath就需要设置为”/”,表示当前路径。
publicPath取决于你的网站根目录的位置，因为打包的文件都在网站根目录了，这些文件的引用都是基于该目录的。假设网站根目录为public，引用的图片路径是’./img.png’，如果publicPath为’/’，图片显示不了，因为图片都打包放在了dist中，那么你就要把publicPath设置为”/dist”。
举个例子：
/assets/
假设你将这个工程部署在服务器 http://server/
通过将output.publicPath设置为/assets/，这个工程将会在http://server/assets/找到webpack资源。
在这种前提下，所有与webpack相关的路径都会被重写成以/assets/开头。
src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"Accessed by: (http://server/assets/picture.jpg)src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"Accessed by: (http://server/assets/img/picture.jpg)
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
使用JS判断字符串中包含内容方法总结
JS+HTML5实绑定鼠标事件的粒子动画
以上就是Webpack path与publicPath区别使用解析的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2752053.html
