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不能自动刷新

时间： 2024-10-29 19:05:49

webpack学习笔记——publicPath路径问题的相关文章

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn

Android学习笔记——文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)学习

一.URI 通用资源标志符(Universal Resource Identifier, 简称"URI"). Uri代表要操作的数据,Android上可用的每种资源 - 图像.视频片段等都可以用Uri来表示. URI一般由三部分组成: 访问资源的命名机制. 存放资源的主机名. 资源自身的名称,由路径表示. Android的Uri由以下三部分组成: "content://".数据的路径.标示ID(可选) 举些例子,如: 所有联系人的Uri: content://con

webpack学习笔记八

webpack自动刷新浏览器 webpack开发服务器,是webpack官方提供的一个辅助开发工具,它可以自动监控项目下的文件,一旦有修改保存的操作,它就会自动执行打包命令,将我们的代码重新打包,并且需要的话还可以刷新浏览器. 首先我们安装webpack-dev-server 在CMD中安装执行npm intall webpack-dev-server -g 在项目目录执行安装依赖命令: npm install --save-dev webpack-dev-server 其中webpack-de

webpack学习笔记

webpack笔记 webpack学习笔记 1.全局安装 npm install webpack -g 2.作为项目依赖安装 npm install webpack --save-dev 3.安装css-loader.sass-loader.node-scss npm install css-loader sass-loader node-scss --save-dev 4.webpack配置 // webpack.config.js var path = require('path'); mo

webpack学习笔记（一）

写在前面: 近几年前端发展迅速,各种新标准的出现,angular.vue.react等框架也是N足鼎立,nodejs的出现使得前端也跨足到server领域,还出现了前端工程化的概念,这一切都在提醒各位前端开发者(工程师)一件事情:我们时时刻刻都需要学习,更新自己的知识体系. 正文: webpack是前端工程化的一个代表,工程化也是一个比较大的概念,所以我会针对自己的学习过程写一个系列的学习笔记,此为第一篇. webpack负责将资源文件模块化,通过它的加载器加载使用,最终将项目打包发布. web

更博不能忘——webpack学习笔记

webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不用会忘掉一丢丢,但是看过脑海中还是有印象的. webpack能够用作模块加载和打包类似Browserify,且能做更多.类似上诉模块管理工具都会有一个相应的配置文件,用于说明,你打包的文件,包装的模块等. webpack常用命令: webpack -p 压缩混淆脚本 webpack --watch

webpackの学习笔记2

code spliting 代码分割可以选择加载项目当时只需要的文件 loader 模块是通过loader处理各种各样的文件,如js文件.css文件.图片模块的打包器安装webpack mkdir webpack-test //建立webpack-test文件夹 cd webpack-test //进入webpack-test文件夹 npm init //npm初始化 npm install webpack –save-dev //在当前文件夹下安装webpa

webpack学习笔记，前方有坑，请注意！！！！！

拖了好久,终于决定系统学习一下webpack(其实是自己懒,哈哈哈),学习任何东西都要亲自动手才行,learn by doing 才是最高效的学习方法,以下是我在学习webpack的心得和踩得的坑,希望看到的同行,可以少踩坑,文章写得烂,不要介意,哈哈哈,下面开始表演. 什么是webpack就不用介绍了,我主要列举遇到的问题. 使用步骤: 新建一个文件夹,然后npm init初始化一下,然后非全局安装webpack 1.打包时记得全局安装webpack,否则命令会报错:"webpack"

gulp、webpack学习笔记

前言:这两天天学了gulp和webpack的基本使用方法,其实对于这些工具,了解基本的用法.熟悉一些常用配置和方法就足够日常使用了.更复杂的等到需要时才再查相关文档就可以了. gulp和webpack虽然有相似的功能,比如压缩.合并文件,但应该算是两种类型的工具. gulp作为自动化构建工具主要的功能就是自动压缩.css转换.合并资源文件,减少http请求,这些功能对于一般的前端项目而言已经足够使用了.而且使用起来也更加方便, 在gulpfile.js引入组件并创建任务便可以很方便的使用. 而w