Webpack pack your web

@Modern Web 2015

Transcript

1. Webpack pack your web Ly Cheng Modern Web 2015
2. LY yhsiang lyforever
3. 國會無雙 市⻑⾧長給問
4. 先調查⼀一下
5. Webpack module bundler
6. https://twitter.com/mjackson/status/584227818910777345
7. 先講⼀一段故事
8. <script src=‘jquery.js’></script> <script src=‘app.js’></script> Uncaught Referencer Error jQuery is not defined
9. https://markb4.files.wordpress.com/2013/05/and-then-what-happened.jpeg
10. CommonJS vs AMD Server-side reuse vs Parallel loading
11. CommonJS AMD Works in the browser without build http://pichost.me/1835208/
12. But Finally, you have to build sth.
13. ES6 Harmony not ready for native browser
14. Not Only Javascript css, images, fonts, html ….
15. Assets pipeline In Rails, but now …
16. http://fccowasso.com/wp-content/uploads/2013/09/hope.jpg
17. http://webpack.github.io/
18. Webpack has Code Splitting Loaders Plugins Hot Module Replacement
19. http://webpack.github.io/docs/comparison.html Comparison Browserify vs Webpack blog.namangoel.com/browserify-vs-webpack-js-drama
20. Basic Usage
21. Configuration CLI and webpack.config.js
22. plugins devtool target
23. loaders preprocess files http://webpack.github.io/docs/loaders.html
24. loaders preprocess files http://webpack.github.io/docs/loaders.html pre-* / loaders / post-*
25. File loader filename template http://webpack.github.io/docs/loader-conventions.html url-loader, json-loader …
26. plugins make webpack flexible
27. Extract-text extract inline css to files
28. Code splitting load on demand idea from GWT
29. CommonJS: require.ensure AMD: require
30. {c, d} will be an additional chunk.
31. Stylesheets
32. require css create style element inline css extract-text-plugin css files
33. Shimming modules
34. require("imports?$=jquery!./file.js") var XModule = require("exports?XModule!./file.js")
35. Hot Module Replacement Livereload for every module
36. http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
37. Entry webpack-dev-server/client? http://localhost:2992 webpack/hot/only-dev-server Plugins new webpack.HotModuleReplacementPlugin()
38. Webpack analyze
39. http://webpack.github.io/analyse/
41. Webpack 2 webpack/concord
42. How We Use Webpack
43. Build with React watchout-tw/prototype-seed
44. Directory Structure component-based, SUITCSS
45. How about API
46. Proxy server webpack-dev-server and express use proxy option now!
47. Special thank to @tomchentw
48. Thank you
49. Recommendations https://github.com/petehunt/webpack-howto webpack-howto https://github.com/webpack/react-starter react-starter