Webpack中publicPath路径问题详解

最近自己在搭建一个基于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

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 的几种文件路径

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

您可能感兴趣的文章:

  • webpack学习教程之publicPath路径问题详解
(0)

相关推荐

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

    本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pubicPath,则引入路径如下 <body> <script src="b.js"></script> </body&g

  • Webpack中publicPath路径问题详解

    最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output output选项指定webpack输出的位置,其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值: process.cwd() output.path 只是指示输出的目录,对应一个 绝对路径 ,例如在项目

  • webpack中的代理配置详解

    目录 作用: 使用场景一: 使用场景二 使用场景三 使用场景四: 使用场景五: 解决跨域原理 vue-cli中proxyTable配置接口地址代理示例 更多参数 作用: 1.解决开发环境跨域问题(不用再去配置nginx和host) 2.如果你有单独的后端开发服务器API,并希望在同域名下发送API请求,那么代理某些URL会很有用 下面介绍一下五种经常使用的场景 使用场景一: 请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api

  • Webpack中SplitChunksPlugin 配置参数详解

    代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 SplitChunksPlugin 来实现的,由于 SplitChunksPlugin 配置参数众多,接下来就来梳理一下这些配置参数. 官网上的默认配置参数如下: module.exports = { //... optimization: { splitChunks: { chunks: 'async'

  • 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:

  • Webpack中publicPath使用详解

    目录 output output.path output.publicPath webpack-dev-server中的publicPath html-webpack-plugin template filename 最后 斜杠/的含义 参考 最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output outp

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • web.xml中如何设置配置文件的加载路径实例详解

    web.xml中如何设置配置文件的加载路径实例详解 web应用程序通过Tomcat等容器启动时,会首先加载web.xml文件,通常我们工程中的各种配置文件,如日志.数据库.spring的文件等都在此时被加载,下面是两种常用的配置文件加载路径,即配置文件可以放到 SRC目录下或者可以放到WEB-INF根目录下 第一种在web.xml中这样配置: <context-param> <param-name >contextConfigLocation </param-name >

  • webpack介绍使用配置教程详解

    目录 一.webpack介绍 1.由来 2.介绍 3.作用 4.拓展说明 5.webpack整体认知 二.webpack安装 1.安装node 2.安装cnpm 3.安装nrm的两种方法 4.安装webpack 三.webpack配置 0.搭建项目结构 1.初始化一个项目(会创建一个package.json文件) 2.在当前的项目中安装Webpack作为依赖包 3.当前项目结构 4.实现CSS打包 5.实现SCSS打包 6.实现Less打包 7.实现打包url资源(图片.gif.图标等)功能 8

  • 利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -

随机推荐