$30 off During Our Annual Pro Sale. View Details »

Webpack

Yu Xin
October 18, 2016

 Webpack

Webpack introduce.

Yu Xin

October 18, 2016
Tweet

More Decks by Yu Xin

Other Decks in Programming

Transcript

  1. 前端部署 yuxin@makenv.com 》Webpack

  2. 传统的网页

  3. Web App时代的前端

  4. 新的挑战 • 越来越复杂的项目结构 • 模块化的javascript • 版本管理 • 模块依赖 •

    打包发布
  5. 迷茫 • JS模块化. module定义 AMD, CMD, ... • 包管理工具 NPM,

    Bower, Browserify ... • 构建工具 grunt, gulp, ...
  6. 常见的模式 • 纯静态目录结构 • 开发调试时保持原始结构,发布的时候再统一 打包 • 开发过程就提供工具,直接打包 SourceMap, LiveUpdate

  7. gulp + bower • bower作为包管理器 • 支持browersync的开发服务器 • gulp pipeline负责构建过程

    • wiredep负责打包以及js/css注入 • 通过插件支持angularjs template打包
  8. Webpack

  9. 参考项目 • react-starter-kit https://github.com/kriasoft/react-starter-kit 仅仅使用Webpack作为打包工具, 项目构建依赖gulp • redux-sample https://github.com/rackt/redux 使用Webpack作为完整的开发构建部署工具

    使用webpack-dev-server作为开发服务器
  10. 体验Webpack • npm安装依赖的javascript 模块 配置webpack.config.js • 了解webpack的基本概念 - loader, plugin

    进一步扩展webpack配置
  11. 基本的Webpack配置

  12. index.html

  13. 安装依赖 npm install -g webpack webpack-dev-server …… npm install --save

    react npm install --save react-redux npm install --save redux ……
  14. 开发过程 • 配置好webpack.config.js webpack-dev-server相关配置 • 启动webpack-dev-server • webpack-dev-server会自动监控相关的资源 文件变化,自动重新打包

  15. Webpack + NPM • Webpack支持npm打包的javascript library/framework • Webpack缺省配置会自动搜索node_modules 下的模块 webpack

    --config webpack.config.js
  16. Webpack 的原理 • 通过分析程序中的require调用构建依赖关系 • 通过loader支持其他的资源(css, less, sass, json …)

    css/less/sass最后会转换成js postcss
  17. 引入css • 理解loader基本概念 • 根据需要添加loader • 代码中添加相关资源的require

  18. 安装相关的loader模块 npm install --save-dev css-loader webpack.config.js

  19. 添加css依赖

  20. 更多功能 • 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
  21. 使用感受 • All in One. 一个工具解决大部分问题. • 支持React Hot Reload

    … very cool. • 支持module css.
  22. 使用中的困惑 • 非javascript模块的依赖关系处理 • js uglify & minify • duplicated

    dependencies
  23. Thanks. The End