From RequireJS to Webpack

by RIDI

Embed

Start on current slide

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-polyﬁll 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-identiﬁers

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 • conﬁg.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

хࢎ೤פ׮