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 相关文章推荐
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
原生javascript获取元素样式
Dec 31 Javascript
angular.element方法汇总
Jan 07 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php mysql 封装类实例代码
2016/09/18 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
不假外出检讨书
2014/01/27 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
工作简报怎么写
2015/07/21 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS