webpack中output中path和publicPath区别详解

深碍√TFBOYSˉ_ 2023-01-16 14:24 105阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  path和publicPath的定义
     *  path和publicPath的区别
     *  利用publicPath区分不同环境资源路径

# 前言 #

webpack是目前比较主流的前端打包工具，其中output属性中有两个类似的配置项，path和publicPath，这一章我们来看看他们之间的区别

# 正文 #

## path和publicPath的定义 ##

> path:所有输出文件的目标路径;打包后文件在硬盘中的存储位置。
> 
> publicPath:输出解析文件的目录，指定资源文件引用的目录 ，打包后浏览器访问服务时的 url 路径中通用的一部分。

## path和publicPath的区别 ##

path是webpack所有文件的输出的路径，必须是绝对路径，比如：output输出的js,url-loader解析的图片，HtmlWebpackPlugin生成的html文件，都会存放在以path为基础的目录下。  
        publicPath 并不会对生成文件的路径造成影响，主要是对你的页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片  
        总而言之，path是文件打包dist的位置，而publicPath是资源文件的公共头部url

## 利用publicPath区分不同环境资源路径 ##

可以利用publicPath来区分不同生产环境下的资源路径

output: { 
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      }

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/f90fd1f9475d415798028315c7685641.png