附源码: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 理解的更多相关文章

  1. webpack 配置 publicPath的理解

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

  2. webpack output的path publicPath

    path是用来定义入口文件保存的地址,而publicPath是定义非入口文件需要抽离保存的第三方文件的保存地址 vue-cli 中HtmlWebpackPlugin生成html,都会存在path路径上 ...

  3. webpack output.publicPath

    output.publicPath string function 对于按需加载(on-demand-load)或加载外部资源(external resources)(如图片.文件等)来说,outpu ...

  4. Webpack中publicPath设置

    webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...

  5. Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. webpack 模块热替换的理解和使用

    模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...

  7. 关于content的理解

    Context字面意思上下文,位于framework packageandroid.content.Context中,其实该类为long型,类似Win32中的Handle句柄,很多方法需要通过 Con ...

  8. 深入理解webpack基本配置(一)

    1. 安装webpack到全局 在学习构建之前,我们来在本地文件新建一个存放项目的文件夹,比如叫demo1这个项目,然后进入demo1该项目的根目录后,执行命令 npm init运行下,一路回车(先简 ...

  9. vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义

    'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要 ...

随机推荐

  1. 测试setsockopt设置超时是否生效代码

    // 测试setsockopt设置超时是否生效代码 #include <arpa/inet.h> #include <netinet/in.h> #include <st ...

  2. Robotframework + Appium 之常用元素定位方法

    任何自动化测试,其实手动测试也是一样的,元素定位(目标定位)是首要任务,这是最直接的测试对象呀! 好了,废话不多说,又到了元素定位啦,之前我们已经介绍过selenium及appium常用的定位方法,下 ...

  3. C++ 中的运算符的优先级

    C++ 中的运算符的优先级 直接看图

  4. Java IO流详尽解析(转)

    流的概念和作用 学习Java IO,不得不提到的就是JavaIO流. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...

  5. EBS Webservice Timeout,HTTP Server Return "500 Internal Server Error"

    http://blog.itpub.net/26687597/viewspace-1207571/ 基于Oracle EBS R12,开发了一个Webservice用于返回某项主数据,当请求的数据量非 ...

  6. TCP/IP协议族分层

    协议族的分层抽象,一定意义上来说,每层敬职敬责的做自己的工作,同时也共同完成通讯协议的共同目标. 这是一个垂直划分的抽象层次,挺有意义. 1.链路层/数据链路层/网络接口层 操作系统中的设备驱动程序和 ...

  7. [ACM_数据结构] POJ2352 [树状数组稍微变形]

    Description Astronomers often examine star maps where stars are represented by points on a plane and ...

  8. java 发架包

    // 完整发布流程 clean compile deploy install -U -DskipTests // 把架包安装到本地,跳过测试 install -Dmaven.test.skip=tru ...

  9. 编程哲学之C#篇:02——学习思维

    <代码大全>的第二章:介绍隐喻(类比)的思维方式, <经济学原理>的第二章:介绍怎么像经济学家一样思考, <计算机的心智操作系统之哲学原理>的第一章:介绍学习操作系 ...

  10. keepalive 原理讲解

    keepalive 我们说到keepalive的时候,需要先明确一点,这个keepalive说的是tcp的还是http的. tcp的keepalive是侧重在保持客户端和服务端的连接,一方会不定期发送 ...