webpack的path和publicPath以及dev-server的publicPath是否清楚呢,一起来看看吧

  • output.path

string
output 目录对应一个绝对路径。

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/assets')
  }
};

作用:输出到物理硬盘上的

  • output.publicPath

string: '' function

对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片、文件等)来说,output.publicPath 是很重要的选项。如果指定了一个错误的值,则在加载这些资源时会收到 404 错误。

此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面(或 <base> 标签)解析。相对于服务的 URL(Server-relative URL),相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL) 也可是可能用到的,或者有时必须用到,例如:当将资源托管到 CDN 时。
大白话:用于引导静态资源(js,css,img),比如在页面引入了background-image:url(’/static/people.png’); 这时候这里的路径就会相对publicPath做调整;指的是将来这些静态资源将会放到哪,有线上静态资源存放的路径决定的

  • devServer.publicPath

string '/'
此路径下的打包文件可在浏览器中访问。
假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 devServer.publicPath'/',所以你的包(bundle)可以通过http://localhost:8080/bundle.js 访问。
修改 devServer.publicPath,将 bundle 放在指定目录下:
webpack.config.js

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/'
  }
};

现在可以通过 http://localhost:8080/assets/bundle.js 访问 bundle。
总的一句话就是:指哪就访问哪

更详细的可以看文档:webpack官方文档
之前看到的一篇掘金文章也不错。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值