Tweet
Tweet

Slide 1

Slide 1 text

前端部署 yuxin@makenv.com 》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