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

本文主要给大家介绍了关于webpack中publicPath路径问题的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build")
 }

如果没有指定pubicPath,则引入路径如下

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

如果有指定publicPath

output: {
  filename: "[name].js",
  path:path.resolve(__dirname,"build"),
  publicPath:"/assets/"
 }

则引入如下

<body>
 <script src="assets/b.js"></script>
</body>

webpack-dev-server环境下，path、publicPath、区别与联系

path：指定编译目录而已（/build/js/），不能用于html中的js引用。

publicPath：虚拟目录，自动指向path编译目录（/assets/ => /build/js/）。html中引用js文件时，必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

发布至生产环境：

1.webpack进行编译（当然是编译到/build/js/）

2.把编译目录（/build/js/）下的文件，全部复制到/assets/目录下（注意：不是去修改index.html中引用bundle.js的路径）

之前因为publicPath的路径错误原因，导致webpack-dev-server不能自动刷新

总结

以上就是这文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 深入理解Webpack 中路径的配置

    深入理解Webpack 中路径的配置

    前言 Webpack2 中有很多涉及路径参数配置,若不知其所以然,很容易混淆出错.本文尽可能的汇集了 Webpack2 中涉及路径的配置,力争深入浅出. context context 是 webpack 编译时的基础目录,入口起点(entry)会相对于此目录查找. 默认值为当前目录,webpack设置 context 默认值代码 可以本地下载: this.set("context", process.cwd()); process.cwd()即webpack运行所在的目录(等同pac

  • webpack打包后直接访问页面图片路径错误的解决方法

    webpack打包后直接访问页面图片路径错误的解决方法

    前言 本文说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 webpack.config.js var Webpack = require("webpack"); var path = require("path"); module.exports = { entry: './js/entry.js', output:

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

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

  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&

  • Angular2学习教程之TemplateRef和ViewContainerRef详解

    Angular2学习教程之TemplateRef和ViewContainerRef详解

    TemplateRef 在介绍 TemplateRef 前,我们先来了解一下 HTML 模板元素 - <template> .模板元素是一种机制,允许包含加载页面时不渲染,但又可以随后通过 JavaScript 进行实例化的客户端内容.我们可以将模板视作为存储在页面上稍后使用的一小段内容. 在 HTML5 标准引入 template 模板元素之前,我们都是使用 <script> 标签进行客户端模板的定义,具体如下: <script id="tpl-mock"

  • spring cloud学习教程之config修改配置详解

    之前我们讲过了spring cloud之config配置的相关内容,那么在Git端修改配置后如何让客户端生效?下面来一起看看详细的介绍吧. 访问接口修改 refresh post方式执行http://localhost/refresh 会刷新env中的配置 restart 如果配置信息已经注入到bean中,由于bean是单例的,不会去加载修改后的配置 需要通过post方式去执行http://localhost/restart, 需要通过application.properties中配置endpo

  • iOS学习教程之UIView中坐标转换详解

    iOS学习教程之UIView中坐标转换详解

    本文主要介绍的是关于iOS UIView坐标转换的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 在开发中我们经常会需要判断两个控件是否包含重叠,此时如果控件A和B的坐标原点如果不确定的话,那么肯定会导致比较不正确发生错误 判断包含重叠的代码如下: CGRectContainsRect(<#CGRect rect1#>, <#CGRect rect2#>) CGRectContainsPoint(<#CGRect rect#>, <#CGPoint

  • spring学习教程之@ModelAttribute注解运用详解

    本文主要给大家介绍了关于java中@ModelAttribute使用的相关资料,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.@ModelAttribute注释方法  例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被执行,因此对于一个controller映射多个URL的用法来说,要谨慎使用. (1)@ModelAttribute注释void返回值的方法 @Controller public class HelloWor

  • Webpack中publicPath路径问题详解

    Webpack中publicPath路径问题详解

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

  • JavaWeb学习过程之MVC查询模式详解

    JavaWeb学习过程之MVC查询模式详解

    一.首先先了解一下 什么是mvc? MVC是Model-View-Controller的简称,即模型-视图-控制器.它是一种设计模式,它吧应用程序分成三个核心模块,模型,视图,控制器.他们各自处理自己的任务. 模型:是应用程序的主体部分,模型指的是业务模型. 一个模型可以为多个视图提供数据. 视图:是用户看到的并与之交互的界面. 可以向用户显示相关的数据,接受用户的输入,但是它不进行任何实际的业务处理. 控制器:接受用户的输入并调用模型和视图,完成用户的需求. 流程: 客户端发送请求到 服务器,

  • IDEA教程之Activiti插件图文详解

    IDEA教程之Activiti插件图文详解

    本文作者:Spring_ZYL 文章来源:https://blog.csdn.net/gozhuyinglong 版权声明:本文版权归作者所有,转载请注明出处 一.安装Activiti插件 1.搜索插件 点击菜单[File]-->[Settings...]打开[Settings]窗口. 点击左侧[Plugins]按钮,在右侧输出＂actiBPM＂,点击下面的[Search in repositories]链接会打开[Browse Repositories]窗口. 2.开始安装 进入[Browse

  • Zend Framework教程之Application用法实例详解

    本文实例讲述了Zend Framework教程之Application用法.分享给大家供大家参考,具体如下: Zend_Application是Zend Framework的核心组件.Zend_Application为Zend Framework应用程序提供基本功能,是程序的入口点.它的主要功能有两个:装载配置PHP环境(包括自动加载),并引导应用程序. 通常情况下,通过配置选项配置Zend_Application构造器,但也可以完全使用自定义方法配置.以下是两个使用用例. Zend_Appli

随机推荐