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