Webpack中publicPath路径问题详解


Posted in Javascript onMay 03, 2018

最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录。

output

output选项指定webpack输出的位置,其中比较重要的也是经常用到的有 path 和 publicPath

output.path

默认值: process.cwd()

output.path 只是指示输出的目录,对应一个 绝对路径 ,例如在项目中通常会做如下配置:

output: {
 path: path.resolve(__dirname, '../dist'),
}

output.publicPath

默认值:空字符串

官方文档中对publicPath的解释 是

webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径,它被称为公共路径(publicPath)。

而关于如何应用该路径并没有说清楚...

其实这里说的所有资源的基础路径是指项目中引用css,js,img等资源时候的一个基础路径,这个基础路径要配合具体资源中指定的路径使用,所以其实打包后资源的访问路径可以用如下公式表示:

静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

例如

output.publicPath = '/dist/'

// image
options: {
 name: 'img/[name].[ext]?[hash]'
}

// 最终图片的访问路径为
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

// js output.filename
output: {
 filename: '[name].js'
}
// 最终js的访问路径为
output.publicPath + '[name].js' = '/dist/[name].js'

// extract-text-webpack-plugin css
new ExtractTextPlugin({
 filename: 'style.[chunkhash].css'
})
// 最终css的访问路径为
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以 publicPath 设置成相对路径后,相对路径是相对于build之后的index.html的,例如,如果设置 publicPath: './dist/' ,则打包后js的引用路径为 ./dist/main.js ,但是这里有一个问题,相对路径在访问本地时可以,但是如果将静态资源托管到CDN上则访问路径显然不能使用相对路径,但是如果将 publicPath 设置成 / ,则打包后访问路径为 localhost:8080/dist/main.js ,本地无法访问

所以这里需要在上线时候手动更改 publicPath ,感觉不是很方便,但是不知道该如何解决...

一般情况下 publicPath应该以'/'结尾,而其他loader或插件的配置不要以'/'开头

webpack-dev-server中的publicPath

点击查看官方文档中关于devServer.publicPath的介绍

在开发阶段,我们借用devServer启动一个开发服务器进行开发,这里也会配置一个 publicPath ,这里的 publicPath 路径下的打包文件可以在浏览器中访问。而静态资源仍然使用 output.publicPath 。

webpack-dev-server打包的内容是放在内存中的,这些打包后的资源对外的的根目录就是 publicPath ,换句话说,这里我们设置的是打包后资源存放的位置

例如:

// 假设devServer的publicPath为
const publicPath = '/dist/'
// 则启动devServer后index.html的位置为
const htmlPath = `${pablicPath}index.html`
// 包的位置
cosnt mainJsPath = `${pablicPath}main.js`

以上可以直接通过 http://lcoalhost:8080/dist/main.js 访问到。

通过访问 http://localhost:8080/webpack-dev-server 可以得到devServer启动后的资源访问路径,如图所示,点击静态资源可以看到静态资源的访问路径为 http://localhost:8080${publicPath}index.html

Webpack中publicPath路径问题详解

html-webpack-plugin

这个插件用于将css和js添加到html模版中,其中 template 和 filename 会受到路径的影响,从源码中可以看出

template

作用:用于定义模版文件的路径

源码:

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

因此 template 只有定义在webpack的 context 下才会被识别, webpack context的默认值为 process.cwd() ,既运行 node 命令时所在的文件夹的绝对路径

filename

作用:输出的HTML文件名,默认为index.html,可以直接配置带有子目录

源码:

this.options.filename = path.relative(compiler.options.output.path, filename);

所以filename的路径是相对于 output.path 的,而在webpack-dev-server中,则是相对于webpack-dev-server配置的 publicPath 。

如果webpack-dev-server的 publicPath 和 output.publicPath 不一致,在使用html-webpack-plugin可能会导致引用静态资源失败,因为在devServer中仍然以 output.publicPath 引用静态资源,和webpack-dev-server的提供的资源访问路径不一致,从而无法正常访问。

有一种情况除外,就是 output.publicPath 是相对路径,这时候可以访问本地资源

所以一般情况下都要保证devServer中的 publicPath 与 output.publicPath 保持一致。

最后

关于webpack中的 path 就总结这么多,在研究关于webpack路径的过程中看查到的一些关于路径的零碎的知识如下:

斜杠/的含义

配置中/代表url根路径,例如http://localhost:8080/dist/js/test.js中的http://localhost:8080/

devServer.publicPath & devServer.contentBase

  1. devServer.contentBase 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
  2. devServer.publicPath 将用于确定应该从哪里提供 bundle,并且此选项优先。

node中的路径

  1. __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
  2. __filename: 总是返回被执行的 js 的绝对路径
  3. process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

参考

详解Webpack2的那些路径
webpack 公共路径(Public Path)
devServer.publicPath
浅析 NodeJs 的几种文件路径

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
Angular Renderer (渲染器)的具体使用
May 03 #Javascript
react router4+redux实现路由权限控制的方法
May 03 #Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 #Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
详解VueJs中的V-bind指令
May 03 #Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 #Javascript
用ES6写全屏滚动插件的示例代码
May 02 #Javascript
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
浅谈PHP的反射API
2017/02/26 PHP
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
使用Python读取大文件的方法
2018/02/11 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python palywright库基本使用
2021/01/21 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
五年级音乐教学反思
2014/02/06 职场文书
《颐和园》教学反思
2014/02/26 职场文书
珍惜水资源建议书
2014/03/12 职场文书
亲子活动总结
2014/04/26 职场文书
计生工作先进事迹
2014/08/15 职场文书
离婚协议书范本样本
2014/08/19 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
新闻通讯稿模板
2015/07/22 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python