关于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 ...
随机推荐
- Java-06-动手动脑
1.为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不能反过来? 因为子类继承于父类,子类中有父类的对象,父类的构造方法初始化后,子类才能运行自己的构造方法 不能放过来,继 ...
- 搭建linux远程服务器和传输下载文件
其实,将ubuntu系统设置为服务器很简单,只需要开启ssh服务就可以了.开启了ssh服务以后,其它电脑就可以通过ssh登录你的这台ubuntu服务器.SSH分客户端openssh-client和op ...
- Sublime2或3配置R、Scala、Python交互式环境
1.Sublime3的下载地址:http://www.sublimetext.com/3 2.刚刚安装的软件是没有PackageControl的,需要在新安装使用 (1) 以前没有安装过Packa ...
- SQL Fundamentals || DCL(Data Control Language) || 系统权限&对象权限管理(GRANT&REVOKE)
SQL Fundamentals || Oracle SQL语言 语句 解释 Create user Creates a user(usually performed by a DBA) Grant ...
- Git添加Gitee远程仓库
1.使用IDEA初始化仓库,并提交代码 2.使用 git remote add origin https://gitee.com/你的码云用户名/XXXX //添加远程仓库 3.使用 git pull ...
- 在选定合适的执行引擎之后,通过敏感字段重写模块改写 SQL 查询,将其中的敏感字段根据隐藏策略(如只显示后四位)进行替换。而敏感字段的隐藏策略存储在 ranger 中,数据管理人员可以在权限管理服务页面设置各种字段的敏感等级,敏感等级会自动映射为 ranger 中的隐藏策略。
https://mp.weixin.qq.com/s/4G_OvlD_5uYr0o2m-qPW-Q 有赞大数据平台安全建设实践 原创: 有赞技术 有赞coder 昨天
- ios-多语言版本开发(三)(转载)
写在前面 iOS 多语言版本的开发(二)中我们实现了如何让用户自己去切换系统语言的功能,我们还写了Demo 以供辅助学习:但是,继以上两篇文章都是建立在项目刚刚启动或启动不久,项目中存在的中文字符串 ...
- LINUX常用命令大全归纳篇
su su命令是最基本的命令之一,常用于不同用户间切换. 例如,如果登录为 user1,要切换为user2,只要用如下命令: $su user2 然后系统提示输入user2口令,输入正确的口令之后就可 ...
- Python开发【算法】:斐波那契数列两种时间复杂度
斐波那契数列 概述: 斐波那契数列,又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, ...
- linux中fork函数详解(转)
add by zhj: 在Linux,创建进程是用fork(),它其实就是拷贝父进程的数据段和其它数据,这相当于C函数调用中的值传递,这是 此后两者的修改都互不影响.因为两者的数据虽相同,但却在不同的 ...