关于webpack的path和publicPath。
path:所有输出文件的目标路径;
publicPath:输出解析文件的目录,url 相对于 HTML 页面
区别:
path是webpack所有文件的输出的路径,必须是绝对路径,比如:output输出的js,url-loader解析的图片,HtmlWebpackPlugin生成的html文件,都会存放在以path为基础的目录下
module.exports={
entry:{
index : path.resolve(SRC_PATH+"/js/index.js"),
},
output:{
filename:'js/[name].js',
path:path.resolve(__dirname,"dist","assets"),
publicPath:"/assets/"
},
module:{
loaders:[
{test:/\.css/,loader:"style-loader!css-loader"},
{test:/\.(png|jpg)$/,loader:"url-loader?limit=8192&name=img/[name][hash:8].[ext]"}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'../index.html',
template: path.resolve(ROOT_PATH+"/index.html"),
title:"测试页面"
})
]
}

注:path.resolve是nodeJs里面方法,可以连接两个相对路径并生成绝对路径;(http://nodejs.cn/api/path.html#path_path_resolve_paths)
publicPath 并不会对生成文件的路径造成影响,主要是对你的页面里面引入的资源的路径做对应的补全,常见的就是css文件里面引入的图片


开发目录和项目输出目录;
#app{
width:400px;height:1200px;
background:url(../img/3.png) no-repeat;
background-size:100%;
}
/--webpack---/
output:{
filename:'js/[name].js',
path:path.resolve(__dirname,"dist","assets"),
publicPath:"/assets/"
},
因为输出目录和开发目录的结构的变化,如果不设置publicPath,就会造成图片路径找不到;


设置publicPath前和后输出的文件对比;
第一次写博客,有点紧张,写的有点乱,轻喷。
关于webpack的path和publicPath。的更多相关文章
- [webpack]path、publicPath、--content-base 理解
附源码:http://files.cnblogs.com/files/chenshao/startPublic.rar 'use strict'; var webpack = require('web ...
- webpack学习笔记——publicPath路径问题
output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...
- webpack 配置 publicPath的理解
在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPa ...
- webpack——publicPath路径问题
output: { filename: "[name].js", path:path.resolve(__dirname,"build") } 如果没有指定pu ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- webpack学习总结
前言 在还未接触webpack,就有几个疑问: 1. webpack本质上是什么? 2. 跟异步模块加载有关系吗? 3. 可否生成多个文件,一定是一个? 4. 被引用的文件有其他异步加载模块怎么办? ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
随机推荐
- [LintCode] Invert Binary Tree 翻转二叉树
Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...
- Context对象还提供了相应的属性来调整线条及填充风格
创建一个Canvas画布的方法如下: 复制代码 代码如下: <canvas id=”canvas” width=”600” height=”400”></canvas> 可以在 ...
- Linux:发行版安装包的下载地址
1.Linux发行版网址 发行版 http://distrowatch.com Linux发行版信息大全 Ubuntu http://www.ubuntu.com 官网 http://cdimage. ...
- 【Git 使用笔记】第四部分:git在公司中的开发流程
先声明几个变量 仓管A:主分支,只有master分支仓管B:开发分支,只有各个业务开发分支 仓管B fork 于 A 如下图 为了保证 代码的稳定性,只有 仓管B中的某个分支测试完毕并进行了代码r ...
- 洛谷P3953 逛公园 [noip2017] 图论+dp
正解:图论(最短路)+dp(记忆化搜索) 解题报告: 这题真的是个好东西! 做了这题我才发现我的dij一直是错的...但是我以前用dij做的题居然都A了?什么玄学事件啊...我哭了TT 不过其实感觉还 ...
- 字符编码笔记:ASCII,Unicode和UTF-8(转载)
注:我注释的地方有 add by zhj.另Unicode.UTF-8.GB2312查询http://www.2fz1.com/so/ 在python中,a.decode(xxx)就是把str类型的字 ...
- eclipse的new server里tomcat7.0根本选不上解决方法
创建Tomcat v7.0 Server 不能进行下一步. 解决方法: 1.退出 eclipse 2.到[工程目录下]/.metadata/.plugins/org.eclipse.core.runt ...
- dedecms利用addfields body在首页调用文章内容
开源程序比较好的一点是可以进行二次开发,比如ytkah想要开发一个专家出诊表的功能模块,如下图所示,每天的专家都不一样,可以用到内容模型,但是相对比较复杂:我们可以把每天的坐诊情况写成一篇文章再通过调 ...
- openstack 部署笔记--neutron计算节点
控制节点 # vim /etc/neutron/neutron.conf [DEFAULT] # ... transport_url = rabbit://openstack:root@control ...
- 使用block的好处
1 使用block 可以轻松地绑定各处代码块,使用delete 结构是分散的,不利于变量之间传值,不像block可以随意地获取变量值. 2.使用block可以方便执行异步代码,作为异步处理回调. In ...