怎样开发和部署前端代码
概念：
304 协商缓存 需和服务器通信一次
本地缓存 通过更新资源路径，让游览器主动加载新资源
只有文件变化，才会导致相应url 变更，文件级别的精确缓存控制
提升网站性能
静态资源和动态网页分集群部署
静态资源部署在各个CDN节点上
前端工程中关于静态资源缓存要面临的优化和部署问题：
先上线静态资源还说先上线页面？
这里面存在时间间隔，会导致期间用户访问页面发生错乱的问题
用非覆盖式发布解决，先部署静态资源，再灰度部署页面
静态资源优化方案，基本上要实现这么几个东西：
- 配置超长时间的本地缓存 —— 节省带宽，提高性能
- 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
- 静态资源CDN部署 —— 优化网络请求
- 更资源发布路径实现非覆盖式发布 —— 平滑升级
静态资源路径md5化
web pack html-webpack-plugin
基于web pack 前端工程环境搭建
webapp/ # webapp根目录
- src/ # 开发目录
- css/ # css资源目录
- img/ # webapp图片资源目录
- js/ # webapp js&jsx资源目录
- components/ # 标准组件存放目录
- foo/ # 组件foo
- css/ # 组件foo的样式
- js/ # 组件foo的逻辑
- tmpl/ # 组件foo的模板
index.js # 组件foo的入口
- bar/ # 组件bar
- foo/ # 组件foo
- lib/ # 第三方纯js库
... # 根据项目需要任意添加的代码目录
- components/ # 标准组件存放目录
- tmpl/ # webapp前端模板资源目录
a.html # webapp入口文件a
b.html # webapp入口文件b
- assets/ # 编译输出目录，即发布目录
- js/ # 编译输出的js目录
- img/ # 编译输出的图片目录
- css/ # 编译输出的css目录
a.html # 编译输出的入口a
b.html # 编译处理后的入口b
- mock/ # 假数据目录
app.js # 本地server入口
routes.js # 本地路由配置
webpack.config.js # webpack配置文件
gulpfile.js # gulp任务配置
package.json # 项目配置
README.md # 项目说明
webpack的三个概念：模块（module）、入口文件（entry）、分块（chunk）
load npm模块
资源引用
一切资源都被当作模块
require() 时还可以在 资源path 前面指定loader，可覆盖配置文件里的配置
require("!style!css!less!bootstrap/less/bootstrap.less");
// “bootstrap.less”这个资源会先被"less-loader"处理，
// 其结果又会被"css-loader"处理，接着是"style-loader"
// 可类比pipe操作
webpack原理
内部实现了一个全局的webpackJsonp()用于加载处理后的资源，并且把资源进行重新编号，每一个资源成为一个模块，对应一个id，后边是模块的内部实现。
对图片的输出：
//24:
//function(module, exports) {
module.exports = "data:image/png;base64,...";
/***/
}
对css文件
默认内嵌到js里边，运行时用style标签内联。可以使用ExtractTextPlugin插件将css提取用link标签引入
