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。的更多相关文章

  1. [webpack]path、publicPath、--content-base 理解

    附源码:http://files.cnblogs.com/files/chenshao/startPublic.rar 'use strict'; var webpack = require('web ...

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

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

  3. webpack 配置 publicPath的理解

    在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPa ...

  4. webpack——publicPath路径问题

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

  5. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. webpack学习总结

    前言 在还未接触webpack,就有几个疑问: 1. webpack本质上是什么? 2. 跟异步模块加载有关系吗? 3. 可否生成多个文件,一定是一个? 4. 被引用的文件有其他异步加载模块怎么办? ...

  8. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  9. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

随机推荐

  1. Windows 10 下 PostgreSQL 生成 UUID(Guid)

    最近在Windows 10 下安装了 PostgreSQL(postgresql-9.6.3-1-windows.exe),在学习过程中,发现PostgreSQL 支持UUID(Guid)类型,但是却 ...

  2. 浅谈SharePoint 2013 站点模板开发

    一直以来所接触的SharePoint开发,都是Designer配合Visual Studio,前者设计页面,后者开发功能,相互合作,完成SharePoint网站开发.直到SharePoint 2013 ...

  3. easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

    var col=$(_758).datagrid("getColumnOption",_75e);if(col){//var _75f=_75c[_75e];var _75f=un ...

  4. Oracle备份恢复之冷备份恢复与异机还原

    (同平台:rhel6.4~rhel6.4:同版本:oracle 11g 11.2.0.1~ oracle 11g 11.2.0.1) 冷备份发生在数据库关闭状态下,直接拷贝物理文件的备份方式,备份数据 ...

  5. Ubuntu 14.04 使用速度极快的Genymotion 取代蜗牛速度的原生AVD模拟器

    Ubuntu 14.04 使用速度极快的Genymotion 取代蜗牛速度的原生AVD模拟器 2014-5-29阅读4045 评论0         默认的AVD的速度可谓奇慢无比,一番搜索最后找到了 ...

  6. nautilus

    在~/.bashrc中定义命令别名,添加以下命令: # some more nautilus aliases alias here='nautilus . > /dev/null 2>&a ...

  7. LightOj 1104 - Birthday Paradox(生日悖论概率)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1104 题意:一年365天,在有23个人的情况下,这23个人中有两个人生日相同的概率是大 ...

  8. Ucenter社区服务搭建

    1.搭建lamp环境yum  –y  install  httpd  php  php-mysql  mysql  mysql-server 2启动服务   3.设置服务开机自动启动 4.上传UCEN ...

  9. 新版微信小程序即将上线 新增微信支付功能

    <经济参考报>消息,新版微信小程序正在测试中,有可能将在近期正式上线.新版小程序增加了“附近门店”功能的接口,微信用户可以通过定位功能,查看提供线下服务的各类门店,并直接利用小程序实现包括 ...

  10. [vue]实现父子组件数据双向绑定

    参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...