关于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 ...
随机推荐
- Mysql: mysqlbinlog命令查看日志文件
想查看mysql的binlog文件,但是裸的binlog文件是无法直视的,mysqlbinlog这个工具是用来查看binlog文件内容的(使用方式man mysqlbinlog查看),但是使用mysq ...
- Centos6.5 虚拟机Mongodb创建副本集
简单副本集的搭建 官方demo的最小化的副本集为Three Member Sets,一个primary和两个secondary.我们先就搭建一个这样的测试环境. 首先建立三个数据目录和日志目录: cd ...
- msql_createdb: 建立一个新的 mSQL 数据库。
mcrypt_ecb: 使用 ECB 将资料加/解密. mcrypt_get_block_size: 取得编码方式的区块大小. mcrypt_get_cipher_name: 取得编码方式的名称. m ...
- oracle trunc 函数处理日期格式,日期类型很有用的几个sql
select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from dual; --显示当前时间2011-12-29 16:24:34 select trunc ...
- linux UVC and hardware viewer
至于从哪个版本开始内核支持UVC,官方的话是“Linux 2.6.26 and newer includes the Linux UVC driver natively.” 1.查看摄像头ID: [r ...
- HTML 标签大全及属性
基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE>,包含 ...
- Java8 Collectors.toMap的坑
按照常规思维,往一个map里put一个已经存在的key,会把原有的key对应的value值覆盖,然而通过一次线上问题,发现Java8中的Collectors.toMap反其道而行之,它默认给抛异常,抛 ...
- 洛谷P3157 动态逆序对 [CQOI2011] cdq分治
正解:cdq分治 解题报告: 传送门! 长得有点像双倍经验还麻油仔细看先放上来QwQ! 这题首先想到的就直接做逆序对,然后记录每个点的贡献,删去就减掉就好 但是仔细一想会发现布星啊,如果有一对逆序对的 ...
- 帝国cms调用最新文章 利用文字调用标签phomenews
最近建站时,朋友要求在头部用帝国cms调用最新文章,当时想了用灵动标签调用,但需要设置一个具体的栏目id,这样就不是调用全站的最新文章了,后面查看了一下标签说明,想到了文字调用标签phomenews. ...
- decltype类型声明- 现代C++新特性总结
decltype类型声明 有时会遇到这样的情况:希望从表达式的类型推断出要定义的变量的类型,但不想用该表达式的值去初始化变量.为了满足这一需求,C++11引入了decltype,它的作用是选择并返回操 ...