Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

[20180226] I understand webpacker perfectly

40 Aufrufe

Veröffentlicht am

@ Livesense 0x64 stories

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

[20180226] I understand webpacker perfectly

  1. 1. Webpacker @ 0x64 #0x0B 2018-02-26 Yuta Suzuki @euxn23
  2. 2. Webpacker
  3. 3. Rails v5.1 Release Note
  4. 4. Rails v5.1 Release Note Rails <3 Webpack  Webpacker
  5. 5. Rails, jQuery
  6. 6. asset-pipeline
  7. 7. * * global scope * gem (not npm) asset-pipeline
  8. 8. * * DOM * View JS asset-pipeline
  9. 9. "
  10. 10. Webpacker
  11. 11. Webpacker
  12. 12. Webpacker
  13. 13. Rails 5.1
  14. 14. !
  15. 15. Rails 5.1
  16. 16. * * asset-pipeline * webpack Webpacker
  17. 17. `app/javascript/packs` entry Webpacker * + public/packs * View * <%= javascript_pack_tag 'my-module' %> * babel-preset-env * .babelrc
  18. 18. Webpacker
  19. 19. Webpacker
  20. 20. webpack.config.js config/webpack/environment.js
  21. 21. webpack.config.js config/webpack/environment.js
  22. 22. config merge
  23. 23. config
  24. 24. * CommonsChunkPlugin * UnglifyPlugin * Tree Shaking JS
  25. 25. * (Uglify ) * * webpacker * CommonsChunkPlugin ! * `RIP CommonsChunkPlugin [ ]` more info  `hiroppy webpack v4 [ ]` Webpack v4
  26. 26. webpack.config.js
  27. 27. * React (CommonsChunkPlugin) * * Tree Shaking * chunk * JS
  28. 28. * JS * chunk * chunk Component Tree Shaking
  29. 29. * ES Modules JS * HTTP/2 JS * CDNJS React
  30. 30. * ES Modules JS * HTTP/2 JS * CDNJS React  Webpack

×