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的路径）

webpack——publicPath路径问题的更多相关文章

  1. webpack学习笔记——publicPath路径问题

    output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...

  2. webpack配置路径及hash版本号，利用html-webpack-plugin自动生成html模板

    在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值. 并配置webpack打包文件配置路径: 配置webpack打包文件路径,及非入口 chunk文件: ...

  3. webpack中路径的理解

    webpack 前端打包工具, 开发人员要面对的路径主要是: 打包前的路径(开发环境路径)和打包后的路径(生产环境路径) 在webpack.config.js中配置的output.path, outp ...

  4. publicPath路径问题

    output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...

  5. webpack publicpath path

    一.publicpath 用绝对路径:如 /assets/ 会在支援路径前 加上 /assets/ devServer  publicpath 如果没有设置的话,取 publicpath 所以 一般要 ...

  6. 关于webpack一些路径

    好多新手对webpack中的路径一直感到迷茫,其实再学习webpack之前都应该去了解下nodejs的内容, 以为webpack就是个nodejs项目,所以里面涉及到的路径都是nodejs里面的写法 ...

  7. 理解webpack中的publicPath

    outPut中的publicPath 默认值: 空字符串. publicPath是非常有必要配置的,他是项目中引入静态资源(js.css)时的基础路径. 例如: outPut.publicPath = ...

  8. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

  9. vue-cli的webpack模板项目配置文件分析

    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...

随机推荐

  1. NOIP 普及组 2014 螺旋矩阵

    传送门 https://www.cnblogs.com/violet-acmer/p/9898636.html 题解: 这道题挺有意思的,有点考思维吧. 大体思路是用四个pair<int ,in ...

  2. Nginx 入门指南

    Nginx 入门指南 简介: Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强.本教程根据淘宝核心系统服务器平台组的 ...

  3. SQL记录-rowid去重

    select * from a where rowid=(select max(rowid) from a)

  4. 震惊！最全PyCharm教程

    PyCharm PyCharm是一个用于计算机编程的集成开发环境(IDE),主要用于Python语言开发,由捷克公司JetBrains开发,提供代码分析.图形化调试器,集成测试器.集成版本控制系统(V ...

  5. Linux下SVN使用

    转载:参考文章http://www.linuxidc.com/Linux/2011-09/42347.htm 1. 将文件checkout到本地目录     svn checkout path(pat ...

  6. Host is not allowed to connect to this MySQL server解决方法

    在装有MySQL的机器上登录MySQL mysql -u root -p密码 执行use mysql; 执行update user set host = '%' where user = 'root' ...

  7. 攻击WEP加密无线网络

    1.介绍 针对客户端环境和无客户端环境下破解WEP的几类方法. 有客户端环境: 一般当前无线网络中存在活动的无线客户端环境,即有用户通过无线连接到无线AP上并正在进行上网等操作时. 无客户端环境: 1 ...

  8. QDoubleSpinBox浮点型数字调节框

    样式: import sys from PyQt5.QtWidgets import QApplication, QWidget, QDoubleSpinBox class Demo(QWidget) ...

  9. BZOJ 4614[Wf2016]Oil

    权限题鸭qwq 首先可以知道最优答案选出来的直线一定可以经过某条线段左端点,如果这条直线没有过左端点,可以通过平移和旋转等操作达到.所以可以枚举这条直线过了哪条线段的左端点,那么对于其他线段,能对答案 ...

  10. Handler使用中可能引发的内存泄漏

    https://my.oschina.net/rengwuxian/blog/181449 http://www.jianshu.com/p/cb9b4b71a820 http://blog.csdn ...