理解webpack的publicPath

最新推荐文章于 2024-03-19 15:17:43 发布
最新推荐文章于 2024-03-19 15:17:43 发布
阅读量7k 收藏 9
点赞数 7
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingzhilingyi/article/details/80085320
版权

要理解publicpath，先要理解资源是如何被打包的

资源打包

1. 新建项目

我们新建一个项目，目录结构如下

drwxr-xr-x    5 huangyue  staff     160  4 25 18:31 dist
drwxr-xr-x  661 huangyue  staff   21152  4 25 16:59 node_modules
-rw-r--r--    1 huangyue  staff  288585  4 25 16:59 package-lock.json
-rw-r--r--    1 huangyue  staff     500  4 25 16:59 package.json
drwxr-xr-x    5 huangyue  staff     160  4 25 17:49 src
-rw-r--r--    1 huangyue  staff     674  4 25 18:33 webpack.config.js

webpack.config.js如下

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    }
};

2.创建文件

  1. 在src下新建一个index.js，style.css和image目录，image目录里放入一个名为icon.png的图片
➜  src ll
total 16
drwxr-xr-x  3 huangyue  staff   96  4 25 17:49 image
-rw-r--r--  1 huangyue  staff  499  4 25 17:54 index.js
-rw-r--r--  1 huangyue  staff   67  4 25 17:49 style.css
➜  src ll image 
total 240
-rw-r--r--@ 1 huangyue  staff  120422  4 25 17:49 icon.png
  1. style.css引用了图片
.hello {
    background: url('./image/icon.png');
}
  1. index.js导入了css文件
import _ from 'lodash';
import './style.css';

function component() {
    var element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    return element;
}

document.body.appendChild(component());
  1. 在dist下新建一个index.html，引用打包后的bundle.js
<!doctype html>
<html>

<head>
    <title>Getting Started</title>
</head>

<body>
    <script src="bundle.js"></script>
</body>

</html>

3.打包

用webpack打包后，dist里文件如下

➜  dist ll
total 408
-rw-r--r--  1 huangyue  staff  120422  4 25 19:43 57b42c57c9cba554ddf4b7a64a1b63b8.png
-rw-r--r--  1 huangyue  staff   78020  4 25 19:43 bundle.js
-rw-r--r--@ 1 huangyue  staff     136  4 25 16:11 index.html

可以看出：
- js文件打包到了output.path + output.filename文件里
- css文件没有被创建，因为它直接被style-loader加进了html文件里（其实是写进了js里，然后js执行时再写入html里）
- 图片文件打包到了output.path目录下，名字换成了hash值，当然可以自己定义名字

我们访问以下index.html，发现css生效了，图片也正确的引用了。用f12调试，可以发现在<head>标签里插入了css代码：

.hello {
    background: url(57b42c57c9cba554ddf4b7a64a1b63b8.png);
}

可以看出：
- file-loader把css文件里的图片引用改了，以前是'./image/icon.png',现在改成了57b42c57c9cba554ddf4b7a64a1b63b8.png
- 无论是名称还是相对路径都改了。

但是，这个相对位置是相对谁呢？？
- 是相对与index.html的位置吗？
- 是相对于打包后的bundle.js的位置吗？
- 还是相对于output.path的位置呢？

由于目前index.html，bundle.js，output.path的目录是一样的，所以需要一个个分析

分析打包后的路径

1.首先，看看是不是与index.html的位置有关，很简单，我们把index.html移到项目根目录下并修改js引用

<script src="./dist/bundle.js"></script>
➜  test ll
total 592
drwxr-xr-x    5 huangyue  staff     160  4 25 19:56 dist
-rw-r--r--    1 huangyue  staff     146  4 25 19:56 index.html
drwxr-xr-x  661 huangyue  staff   21152  4 25 16:59 node_modules
-rw-r--r--    1 huangyue  staff  288585  4 25 16:59 package-lock.json
-rw-r--r--    1 huangyue  staff     500  4 25 16:59 package.json
drwxr-xr-x    5 huangyue  staff     160  4 25 17:49 src
-rw-r--r--    1 huangyue  staff     678  4 25 19:57 webpack.config.js

如果打包后图片的路径是相对于index.html生成的,那么由于图片在dist文件夹下，图片的引用就会是

./dist/57b42c57c9cba554ddf4b7a64a1b63b8.png

让我们访问现在的index.html，很不幸，发现图片没有被正确加载，f12看看

.hello {
    color: red;
    background: url(57b42c57c9cba554ddf4b7a64a1b63b8.png);
}

图片的引用并未改变，说明引用图片的相对路径与index.html无关

2.那是不是与bundle.js有关呢？很简单，我们接着上一步，改一改bundle.js的位置

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

这样index.html的js引用也稍微改改

<script src="./dist/js/bundle.js"></script>

如果图片的相对位置是与bundle.js关联的，那么图片的引用就会是

../57b42c57c9cba554ddf4b7a64a1b63b8.png

打包，看结果，图片依旧没有被加载，f12看一下：

.hello {
    color: red;
    background: url(57b42c57c9cba554ddf4b7a64a1b63b8.png);
}

没有变化

3.那么相对路径就只能是与output.path相关咯。为了验证这个，我们改一改配置文件

{
    test: /\.(png|svg|jpg|gif)$/,
    use: {
        loader: 'file-loader',
        options: {
            outputPath: 'images'
        }
    }
}

这里加了一个outputPath: 'images',目的是使得图片文件会在dist的images文件夹下生成

打包看看效果

➜  dist ll
total 8
drwxr-xr-x  3 huangyue  staff   96  4 25 20:22 images
drwxr-xr-x  3 huangyue  staff   96  4 25 19:56 js
➜  dist ll images 
total 240
-rw-r--r--  1 huangyue  staff  120422  4 25 20:22 57b42c57c9cba554ddf4b7a64a1b63b8.png

在f12调试一下index.html

.hello {
    color: red;
    background: url(images/57b42c57c9cba554ddf4b7a64a1b63b8.png);
}

可以看到，图片引用的路径变了！正好就是相对于output.path的路径。

另外

file-loader的这种加载资源的特性，不仅仅是针对于这次实验里的css引用，所有通过file-loader加载的资源都是一样。
比如在js里引用的图片，引用路径也会做更改

言归正传

前面讲了那么久的图片打包，其实是为了更好的理解publicPath。

正如上面的实验一样，因为图片引用的路径是相对于output.path的，假如我index.html没有放在output.path底下，图片引用路径就错了。

这种情况下，就该使用publicPath了。

先稍微回顾一下现在的目录机构

➜  test ll
total 592
drwxr-xr-x    5 huangyue  staff     160  4 25 20:22 dist
-rw-r--r--    1 huangyue  staff     146  4 25 19:56 index.html
drwxr-xr-x  661 huangyue  staff   21152  4 25 16:59 node_modules
-rw-r--r--    1 huangyue  staff  288585  4 25 16:59 package-lock.json
-rw-r--r--    1 huangyue  staff     500  4 25 16:59 package.json
drwxr-xr-x    5 huangyue  staff     160  4 25 17:49 src
-rw-r--r--    1 huangyue  staff     674  4 25 20:28 webpack.config.js

➜  test ll dist 
total 8
drwxr-xr-x  3 huangyue  staff   96  4 25 20:22 images
drwxr-xr-x  3 huangyue  staff   96  4 25 19:56 js

而目前的图片引用路径为

.hello {
    color: red;
    background: url(images/57b42c57c9cba554ddf4b7a64a1b63b8.png);
}

明显，如果要正确引用到图片，还要再加一层dist目录。所以，修改配置文件如下：

output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './dist/'
},

加上了publicPath

打包，访问index.html，发现图片已经加载了，f12看看：

.hello {
    color: red;
    background: url(./dist/images/57b42c57c9cba554ddf4b7a64a1b63b8.png);
}

可以看到，引用的路径是publicPath + 图片相对于output.path的路径

那么,publicPath到底是干啥用的，就已经比较明白了。

bingzhilingyi
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue项目打包publicpath_Vue项目打包常见问题整理
weixin_40000301的博客
12-22 1894
Vue 项目在开发时运行正常，打包发布后却出现各种报错，这里整理一下遇到的问题，以备忘。1、js 路径问题脚手架默认打包的路径为绝对路径，改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath，把原来 ‘/’ 改为 ‘./’assetsPublicPath: './'}2、img 路径问题在 build/utils.js 文件中 Extract...
webpack 踩坑之 path publicPath
zhangfeng1742的专栏
12-10 1061
咋们以 Vue Cli 为例，介绍一下 webpack 配置的中的 path 和 publicPath： path： 所有输出文件的目标路径，必须是绝对路径（使用 node.js 的 path 模块） 如上图，项目打包后，输出文件在 dist 目录下 publicPath： 引用文件的路径前缀，url 相对于 HTML 页面 如上图，指定了资源的基础路径 "/" 和子路径"...
publicPath 和 __webpack_public_path__ 和 process.env.BASE_URL的区别和使用方法
最新发布
JCjunior的博客
03-19 1411
publicPath 和 __webpack_public_path__ 和 process.env.BASE_URL的区别和使用方法
webpack path publicpath 的区别
doctorone的博客
04-04 393
一般情况的打包目录： path: index.html xx/app.js xx/main.css xx/logo.png path：是打包文件 本地输出目录 publicpath：在服务器上的发布目录（建议绝对路径，相对路径也可以，但是注意的是相对index.html服务器发布目录）app.js 会渲染进入 index.html ...
webpack中output之path和publicPath详解
祥哥的说
06-09 2万+
path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。区别：path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目...
webpack学习教程之publicPath路径问题详解
12-08
在深入探讨Webpack的`publicPath`配置之前，我们先来理解一下Webpack的基本概念。Webpack是一个模块打包工具，它将各种类型的资源（JavaScript、CSS、图片等）视为模块，并通过配置和插件将其打包成可部署的静态资源...
深入理解Webpack 中路径的配置
08-30
深入理解Webpack 中路径的配置 在 Webpack 中，路径配置是非常重要的一部分，直接影响着项目的构建和输出。下面，我们将深入了解 Webpack 中路径配置的相关知识点。 一、 Context Context 是 webpack 编译时的...
深入理解webpack process.env.NODE_ENV配置
11-20
NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。 为了查看 process的基本信息，我们可以在文件夹中 新建一个 process.js 文件，在里面加一句代码：console.log(process);...
webpack打包常用配置项
09-05
其中，`path` 是输出目录，`filename` 指定每个入口对应的输出文件名，`publicPath` 用于指定资源 URL 的基础路径。 ### 3. `module` `module` 配置是 Webpack 处理模块的核心部分，通过 `rules` 数组定义了不同...
入门webpack(七）Webpack中的css-loader 和style-loader
热门推荐
TyrionJ的博客
02-13 2万+
传统上我们会在html文件中引入CSS代码，借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。style-loader和css-loader作用是不同的。 css-loader: 加载.css文件 style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
Webpack中publicPath路径问题详解
12-10
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定webpack输出的位置，其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值： process.cwd() output.path 只是指示输出的目录，对应一个 绝对路径 ，例如在项目中通常会做如下配置： output: { path: path.resolve(__dirna
Webpack基础入门与使用
weixin_44786238的博客
07-11 311
Webpack基础入门与使用 Time：2021-3-7 前言 在今天终于准备开始系统学习vue了，vue的基本语法非常简单，其真正需要理解的是，如何使用，怎么使用，使用的逻辑。vue最强大的功能在于其组件化的功能，自定义的功能，可以极大简结前端HTML页面的代码，而维护只需要对进行相应的组件化了的vue template进行维护于修改，其次就是可以扩展html元素，使得前端开发具有更大的自由度。基于vue这种组件化的思维，在较大的项目中会出现大量的vue文件和js文件，而webpack就提供了一种模块化的
webpack中output中path和publicPath区别详解
反手一个bug的博客
04-26 1592
文章目录前言正文path和publicPath的定义path和publicPath的区别利用publicPath区分不同环境资源路径小结 前言         webpack是目前比较主流的前端打包工具，其中output属性中有两个类似的配置项，path和publicPath，这一章我们来看看他们之间的区别 正文 path和publicPath的定义 path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。 publi
【原】使用webpack打包的后，公共请求路径的配置问题
weixin_34356310的博客
12-08 563
在我们公司，和后台接接口时，公共的请求路径我们是单独抽出来的，放在一个独立的public.js中，在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时，我们就这样使用 这种用法在平时的项目中是没有问题的。但是因为公司最近的项目都是用react来用，然后用webpack来打包。 webpack打包后，public这个js也被打包进了每个组件中去。如果需...
webpack之publicPath
coding...
05-06 4913
前言：本文解决了《 webpack之输出路径处理 》最后预留的路径问题正文：要解决《 webpack之输出路径处理 》最后预留的路径问题，只需要在webpack.config.js的output选项中添加publicPath配置。执行npm run build，在浏览器打开dist/index.html文件，所有资源均正常加载！但是，现在执行npm run dev，浏览器打开的http://loc...
webpack html输出路径,Webpack中publicPath详解
weixin_39939601的博客
06-15 748
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。outputoutput选项指定webpack输出的位置，其中比较重要的也是经常用到的有path和publicPathoutput.path默认值：process.cw...
一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别
vv_bug
10-24 2万+
一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别 简介 用过 vue-cli 脚手架搭建 vue 项目都知道，vue-cli 中内置了 vue-style-loader 去加载样式模块，最后通过 <style> 标签把样式加载到页面，但是 style-loader 同样可以达到同样的效果，那么 vue 官方为啥还封装一个 vue-style-loader 库呢？那么它们到底有啥区别？平时项目中又该如何选择呢？ 下面先看一下它们各自官网的简介。 开始
vue.config.js publicPath "./" npm run build无效的原因
diqigou2000的博客
09-30 8271
outputDir assetsDir indexPath必须填 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: "dist", assetsDir:"static", indexPath:'index....
React多项目集成时publicUrl设置注意事项
River_Frozen的博客
07-18 2793
build ————> './' dev ————> '/'
webpack publicpath
04-06
webpack的publicpath是一个配置项，用于指定浏览器在加载静态资源时从哪个路径加载。在webpack配置中，可以通过设置output.publicPath来指定public path。例如，如果设置为"/assets/"，则在浏览器中加载静态资源时将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值