From RequireJS to Webpack

발표자: 스토어팀 조규진

Transcript

1. From RequireJS To Webpack झషয౱ ઑӏ૓
2. • ݽٚ ݽٕ੉ ౵ੌ • ੘਷ ױਤ੄ ઺ࠂ ઁѢо ੗ਬ܂૑ ঋ׮ • ೤୛ࢲ ࠽٘ೞ۰ݶ concat ೧ঠೠ׮ (dependency ҅࢑ X) • ࢜۽ بੑೠ Vue.js ੸ਊ ಕ੉૑ח webpackਵ۽ ࠽٘ 
 ⟶ ӝઓ ݽٕҗ ഐജ੉ ө׮۽਑
3. • ݽٕ dependency ӝળਵ۽ ߣٜ • babel ١ ׮নೠ loaderܳ ా೧ ߣٜ җ੿ীࢲ ߸ഋ ੸ਊ оמ webpack
4. ߄Լࠁ੗~ 7઱ زউ ࢲ੼ ݽٚ JS ࣻ੿
5. • Bower ઁѢ && webpack && ES6 زदী ੸ਊ • झప੉૚ పझ౟݅ 3ߣ… ೧ب ೧ب ࠛউೣ • ߓನ റ উ٘۽੉٘ীࢲ ׮਍۽٘ ੘ز ী۞ • webpack → Bower ઁѢ → ES6 ࣽਵ۽ ੸ਊ೮׮ݶ?
6. • ݽٕਸ ղ ݋؀۽ • ES6
7. ߓನ റ
8. ҳ ߡ੹ উ٘۽੉٘ জ, ௼ۨ݃ ࠳ۄ਋੷ীࢲ झ௼݀౟ ੘ز উ ೣ
9. • ES3ীࢲ ES ৘ডযܳ foo.keyword, {keyword: ‘foo’} ৬ э੉ ࢎਊೡ ࣻ হ਺ • ௼ۨ݃ח উ٘۽੉٘ 4.0.x ੋؘ ES3 babel-polyfill VueJS
10. Babel plugin ੸ਊ UglifyJSPluginীࢲ ׮द quote ઁѢೞ૑ ঋب۾ ২࣌ ୶о
11. • moduleIdо ҅ࣘ ߸҃غח ޙઁ • ࠽٘ റ ౵ੌ ױਤ۽ ߓನೞח दझమ
 (੉ߣ ઱ deployer بੑ ) ੉Ѣ ߓನೞח Ѣ ݏইਃ?
12. https://webpack.js.org/guides/caching/#module-identifiers
13. moduleIdী ࢚؀҃۽৬ hash ੸ਊ webpack ࢸ੿ ੿ࠁ݅ vendors.webpack.js ܻ࠙
14. ৈ੹൤ ৘࢚஖ ޅೠ ౵ੌ੉ ߸҃ؽ ੉Ѣ ߸҃ػ Ѣ ݏইਃ? • chunkIdب ҅ࣘ ߸҃
15. chunkIdب ੉ܴਵ۽ ߸҃
17. • async import • ridibooks.com / static.ridibooks.com • xxx.dev.ridi.io • config.local.php $STATIC_URL ଵઑ೧ࢲ webpack.local.js ࢤࢿ
18. • ಣӐ ࠽٘ दр 20s (Babel cache ੸ਊػ ࢚క) • ઱۽ UglifyJSPluginীࢲ ૑ো
19. ࠙ݺ ҕध ޙࢲী parallel, cache ২࣌੉ ੓חؘ..
20. • webpack ҕधޙࢲীࢲ п plugin repo README.md ࢎਊ • ߡ੹ ҙ҅হ੉ ୭न ழ޿ਵ۽ оઉ১
21. ߹ب ೒۞Ӓੋ ੸ਊ 10ੌ ੹ী UglifyJSPlugin v1.0.0 ܾܻૉ
22. • webpack ߣٜ݂ ٸޙী ѐߊ दীب sourcemap ೙ਃ • cheap-module-eval-source-map
23. খਵ۽..
24. • ԇؘӝ݅ ES6ੋ ݽٕٜ refactor • VueJS ੸ਊ ഛ؀ (GNB, ࢚ࣁಕ੉૑ दܻૉ ܻझ౟ ١) • jQuery ୭ࣗച…. • ૑ࣘ੸ੋ ѐߊജ҃ ѐࢶ
25. хࢎ೤פ׮