理解webpack中的publicPath
outPut中的publicPath
默认值: 空字符串。
publicPath是非常有必要配置的,他是项目中引入静态资源(js、css)时的基础路径。
例如:
outPut.publicPath = '/dist/';
在使用html-webpack-plugin插件打包后的html文件(下图)可以看到,引入js文件的路径为“publicPath+静态资源“。敲黑板划重点,这里publicPath应该写“以根目录的方式表示的路径,如:/dist/”或者是绝对路径,不应该是相对路径。因为将静态资源放在CDN上时,使用相对路径是无法访问到资源的。如果不设置pablicPath行不行,答案是不行。不设置的话默认取值为空字符串(pablicPath: ' '),那么使用html-webpack-plugin打包后的html中引入的js路径为 src="../folder1.a095318635a306de0d2e.js",对,成了相对路径了。所以如果在生产环境上,publicPath设置成绝对路径最好。
webpack-dev-server中的publicPath
默认值:‘/’。注意,如果你output和devServer中都没有配置publicPath,那么devServer的publicPath默认值为‘/’;但是如果output中配了publicPath,devServer中没配,那么devServer中publicPath的默认值以output中的为准。
在开发阶段,我们要用devServer启动一个开发服务器,这里也有一个publicPath需要配置。webpack-dev-server打包的文件是放在内存中的而不是本地上,这些打包后的资源对外的根目录就是publicPath。
例如:
devServer: {
...
publicPath: '/dist/'
}
那么我们可以在浏览器中输入,http://localhost:9000/dist/ + 资源名,就可以访问到该资源(下图)。注意:devServer中的publicPath需要跟outPut中的一致,或则不设置publicPath,他会默认与output中的一致。
斜杠/
的含义
配置中/
代表url根路径,例如http://localhost:9000/dist/js/test.js
中的http://localhost:9000/
常见问题:
浏览器打开http://localhost:9000/index.html时页面空白。这是因为output与devServer中的publicPath不一致,导致资源没有引入进页面里。
例子:
假如你的配置如下就会出现页面空白的问题
output: {
...
publicPath: '/dist/'
} devServer: {
...
publicPath: '/assets/'
}
html-webpack-plugin插件在打包html(下图)时,里面引入js文件的路径会是src="/dist/资源名" 。但是http://localhost:9000/dist/folder1.0bad1ca562f90da47034.js是引入不到该资源的,而http://localhost:9000/assets/folder1.0bad1ca562f90da47034.js可以引入到该资源。体会下这句话,"开发环境时,用webpack-dev-server打包的资源是存放在devServer.publicPath路径下",你就会明白了。所以output和devServer中的publicPath需要一致。
理解webpack中的publicPath的更多相关文章
- 理解webpack中的devTool的配置项
2.1. eval eval 会将每一个module模块,执行eval,执行后不会生成sourcemap文件,仅仅是在每一个模块后,增加sourceURL来关联模块处理前后对应的关系.在webpac ...
- 理解webpack中的process.env.NODE_ENV
参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...
- Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- Webpack中publicPath设置
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
- Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack中路径的理解
webpack 前端打包工具, 开发人员要面对的路径主要是: 打包前的路径(开发环境路径)和打包后的路径(生产环境路径) 在webpack.config.js中配置的output.path, outp ...
- webpack进阶构建项目(一):1.理解webpack加载器
1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. We ...
- Vue、webpack中默认的config.js、index.js 配置详情
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...
- 深入理解webpack(三) babel之配置文件
一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...
随机推荐
- 10-最小生成树-Prim算法
#include <iostream> #include <cstring> #include <cstdio> using namespace std; #def ...
- T-sql GroupBy语句常见问题处理
1.问题描述 现在有一张course表(含课程编号和名称)和一张sc表(含学生学号,选修课程的编号以及考试成绩),如下:现在想要查询所有课程编号.对应的课程名称以及选修该课程的所有学生的平均成绩.一开 ...
- 40 Questions to test your skill in Python for Data Science
Comes from: https://www.analyticsvidhya.com/blog/2017/05/questions-python-for-data-science/ Python i ...
- Python将阿拉伯数字转化为中文大写-乾颐堂
利用Python将阿拉伯数字转化为中文大写,其实最麻烦的地方就是中间空多个0的问题,这种情况下,采用拆分法则,将一个大数字,先拆分成整数部分和小数部分,再对整数部分按照仟.万.亿.兆分位拆分为四个字符 ...
- JavaScript中的shift()、unshift()和pop()函数
JavaScript中的shift()和pop()函数 1.shift()函数 定义 该函数从从数组中删除第一项,并返回该删除项. 用法示例 var fruits = ["Banana& ...
- https hsts 私密链接
chrome强制转跳https,删除对某个域名的强制转跳即可 hrome的地址栏输入:chrome://net-internals/#hsts 在Delete domain下输入相对应的网址,不带 ...
- mvc中图片的保存和显示
图片保存到网站根目录(例如 D:\www\Web)下 Web 应用程序根目录运算符用“~”表示.注意不是网站根目录(网站根目录是指针对域名计算的) 即便是网站部署在其他网站下(例如IIS中,在A站下( ...
- Spring 事务不回滚
为了打印清楚日志,很多方法我都加tyr catch,在catch中打印日志.但是这边情况来了,当这个方法异常时候 日志是打印了,但是加的事务却没有回滚. 例: 类似这样的方法不会回滚 (一个方 ...
- ScreenCapture-drupal 7.34-ckeditor4x整合教程
1.1. drupal 7x-ckeditor4x 插件下载:Drupal 7x, 1.1.1. 安装ckeditor4x 下载插件 说明:下载并解压 CKEditor4x插件:https://yun ...
- 在java中对数据库进行增删改查
1.java连接MySql数据库 代码区域: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...