[webpack]path、publicPath、--content-base 理解
附源码:http://files.cnblogs.com/files/chenshao/startPublic.rar
'use strict';
var webpack = require('webpack');
var path = require('path'); //CLI:webpack-dev-server --content-base public module.exports = {
entry: path.join(__dirname,"src","entry.js"),
output: {
/*
webpack-dev-server环境下,path、publicPath、--content-base 区别与联系
path:指定编译目录而已(/build/js/),不能用于html中的js引用。
publicPath:虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。
--content-base:必须指向应用根目录(即index.html所在目录),与上面两个配置项毫无关联。
===================================================
发布至生产环境:
1.webpack进行编译(当然是编译到/build/js/)
2.把编译目录(/build/js/)下的文件,全部复制到/assets/目录下(注意:不是去修改index.html中引用bundle.js的路径)
*/
path: path.join(__dirname,"build","js"),
publicPath: "/assets/",
//publicPath: "http://cdn.com/assets/",//你也可以加上完整的url,效果与上面一致(不需要修改index.html中引用bundle.js的路径,但发布生产环境时,需要使用插件才能批量修改引用地址为cdn地址)。
filename: 'bundle.js'
}
};
[webpack]path、publicPath、--content-base 理解的更多相关文章
- webpack 配置 publicPath的理解
		
在学习webpack的时候,配置文件中有一个publicPath属性,一直不是很明白它到底是怎么用,也查了很多资料,得到最多的说法是当打包的时候,webpack会在静态文件路径前面添加publicPa ...
 - webpack output的path publicPath
		
path是用来定义入口文件保存的地址,而publicPath是定义非入口文件需要抽离保存的第三方文件的保存地址 vue-cli 中HtmlWebpackPlugin生成html,都会存在path路径上 ...
 - webpack output.publicPath
		
output.publicPath string function 对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片.文件等)来说,outpu ...
 - Webpack中publicPath设置
		
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
 - Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader
		
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
 - webpack 模块热替换的理解和使用
		
模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...
 - 关于content的理解
		
Context字面意思上下文,位于framework packageandroid.content.Context中,其实该类为long型,类似Win32中的Handle句柄,很多方法需要通过 Con ...
 - 深入理解webpack基本配置(一)
		
1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...
 - vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义
		
'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要 ...
 
随机推荐
- 日期 时间选择器(DatePicker和TimePicker)实现用户选择
			
日期和时间 作者的设计TimePicker时,大小分布不合理,我调整宽度为match-parent高度为wrap-parent就可以了. public class MainActivity exten ...
 - C++中的矩阵运算
			
C++中的矩阵运算 1. 2阶矩阵的逆矩阵公式
 - C++中的关键字用法---typename
			
1. typename 关键字 "typename"是一个C++程序设计语言中的关键字.当用于泛型编程时是另一术语"class"的同义词.这个关键字用于指出模板 ...
 - shell 文本处理——使用awk格式化时间戳
			
date -d @时间戳 "+%Y-%m-%d %H:%M:%S" 也可以内置函数 awk '{print strftime("%Y-%m-%d %H:%M:%S&quo ...
 - oracle中row_number() over()分析函数用法
			
row_number()over(partition by col1 order by col2)表示根据col1分组,在分组内部根据col2排序,而此函数计算的值就表示每组内部排序后的顺序编号(组内 ...
 - javascript data format
			
Date.prototype.Format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+& ...
 - 找不到请求的 .Net Framework Data Provider
			
1.安装 mysql-connector-net-6.9.10.msi 2.修改C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\machine ...
 - Meteor in Action(一)起步
			
杜撰的名字,这个系列文章旨在记录工作中开发APP所要学习meteor的过程. 最简单的例子,运行Meteor自带的缺省的Hello world例子. 安装好Meteor后,建立一个空白目录. 然后: ...
 - iOS推送功能极光推送的介绍与实现
			
1.个人整理操作流程 2.官方使用说明流程 2018iOS极光推送完整流程 极光推送官网
 - vue学前班004(基础指令与使用技巧)
			
我学vue 的最终目的是为了 做apicloud 和vue 的开发 作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍. (强烈建议 官网案例走一遍) 基础指令的学习(结合aui ...