Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
前端部署
[email protected]
》Webpack
Slide 2
Slide 2 text
传统的网页
Slide 3
Slide 3 text
Web App时代的前端
Slide 4
Slide 4 text
新的挑战 ● 越来越复杂的项目结构 ● 模块化的javascript ● 版本管理 ● 模块依赖 ● 打包发布
Slide 5
Slide 5 text
迷茫 ● JS模块化. module定义 AMD, CMD, ... ● 包管理工具 NPM, Bower, Browserify ... ● 构建工具 grunt, gulp, ...
Slide 6
Slide 6 text
常见的模式 ● 纯静态目录结构 ● 开发调试时保持原始结构，发布的时候再统一 打包 ● 开发过程就提供工具，直接打包 SourceMap, LiveUpdate
Slide 7
Slide 7 text
gulp + bower ● bower作为包管理器 ● 支持browersync的开发服务器 ● gulp pipeline负责构建过程 ● wiredep负责打包以及js/css注入 ● 通过插件支持angularjs template打包
Slide 8
Slide 8 text
Webpack
Slide 9
Slide 9 text
参考项目 ● react-starter-kit https://github.com/kriasoft/react-starter-kit 仅仅使用Webpack作为打包工具, 项目构建依赖gulp ● redux-sample https://github.com/rackt/redux 使用Webpack作为完整的开发构建部署工具 使用webpack-dev-server作为开发服务器
Slide 10
Slide 10 text
体验Webpack ● npm安装依赖的javascript 模块 配置webpack.config.js ● 了解webpack的基本概念 - loader, plugin 进一步扩展webpack配置
Slide 11
Slide 11 text
基本的Webpack配置
Slide 12
Slide 12 text
index.html
Slide 13
Slide 13 text
安装依赖 npm install -g webpack webpack-dev-server …… npm install --save react npm install --save react-redux npm install --save redux ……
Slide 14
Slide 14 text
开发过程 ● 配置好webpack.config.js webpack-dev-server相关配置 ● 启动webpack-dev-server ● webpack-dev-server会自动监控相关的资源 文件变化，自动重新打包
Slide 15
Slide 15 text
Webpack ＋ NPM ● Webpack支持npm打包的javascript library/framework ● Webpack缺省配置会自动搜索node_modules 下的模块 webpack --config webpack.config.js
Slide 16
Slide 16 text
Webpack 的原理 ● 通过分析程序中的require调用构建依赖关系 ● 通过loader支持其他的资源(css, less, sass, json …) css/less/sass最后会转换成js postcss
Slide 17
Slide 17 text
引入css ● 理解loader基本概念 ● 根据需要添加loader ● 代码中添加相关资源的require
Slide 18
Slide 18 text
安装相关的loader模块 npm install --save-dev css-loader webpack.config.js
Slide 19
Slide 19 text
添加css依赖
Slide 20
Slide 20 text
更多功能 ● webpack-dev-server ● source-map ● react-hot-reload ● more and more http://webpack.github.io/docs/ ● angular-template-loader https://github.com/WearyMonkey/ngtemplate-loader https://github.com/teux/ng-cache-loader
Slide 21
Slide 21 text
使用感受 ● All in One. 一个工具解决大部分问题. ● 支持React Hot Reload … very cool. ● 支持module css.
Slide 22
Slide 22 text
使用中的困惑 ● 非javascript模块的依赖关系处理 ● js uglify & minify ● duplicated dependencies
Slide 23
Slide 23 text
Thanks. The End