Upgrade to Pro — share decks privately, control downloads, hide ads and more …

webpackが何故必要で、 何故分かりづらいのか

tomof
November 20, 2016

webpackが何故必要で、 何故分かりづらいのか

tomof

November 20, 2016
Tweet

More Decks by tomof

Other Decks in Programming

Transcript

  1. • webpack your bags ͷ Maxime Fabre ࢯ – طଘͷπʔϧͰຬ଍͍ͯͨ͠͠ɺ࠷ॳʹwebpackͷ֓ཁʹ໨Λ

    ௨ͨ࣌͠ʹΠϥοͱͯ͠λϒΛดͨ͡ɻ – ࠓ͸શͯΛwebpackʹҕͶͯ͠·͑ͱͳ͍ͬͯΔɻ 12 webpackΛ࢖ͬͨਓͷײ૝
  2. webpack.config.js • ࠷ऴతʹ module.exports ʹΦϒδΣΫΛࢦఆ͢Δ 15 module.exports = {
 entry:

    …,
 output: {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  3. webpack.config.js • ΤϯτϦϙΠϯτ = JavaScript࣮ߦͷೖΓޱͱͳΔϑΝΠϧΛࢦఆ 16 module.exports = {
 entry:

    …,
 output: {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  4. webpack.config.js 17 module.exports = {
 entry: …,
 output: {…},
 module:

    {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 }; • ग़ྗϑΝΠϧͷઃఆ
  5. webpack.config.js • ϩʔμʔͷઃఆ 18 module.exports = {
 entry: …,
 output:

    {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  6. webpack.config.js • ϓϥάΠϯͷઃఆ 19 module.exports = {
 entry: …,
 output:

    {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  7. ϩʔμʔͷઃఆྫ 24 module: {
 loaders: [
 {
 test: /\.js/,
 loader:

    'babel',
 include: __dirname + '/src',
 },
 {
 test: /\.scss/,
 loader: 'style!css!sass'
 },
 …
 ]
  8. ϩʔμʔͷνΣʔϯ 25 • νΣʔϯͰܨ͛Δ͜ͱ͕Մೳɻ ྫ)ɹ'style!css!sass' 1. SassΛCSSʹม׵ 2. CSSΛJavaScriptʹจࣈྻͱͯ͠ಡΈࠐΉ 3.

    ಡΈࠐΜͩจࣈྻΛ<style>λάͱͯ͠<head>಺ʹ௥Ճ .sass .css HTML <style> body: {…} header: {…} 1 2 3
  9. HMR 29 • Hot Module Replacement • ΦʔτϦϩʔυ͸ϖʔδશମΛ࠶ಡࠐΈ͢Δ͕ɺHMR͸࠶ಡ ࠐ͢Δ͜ͱແ͘ɺมߋ͞ΕͨՕॴ͚ͩΛಈతʹஔ׵͢Δɻ •

    ྫ͑͹ɺ͋ΔखॱΛز͔ͭ౿ΜͰදࣔͨ͠μΠΞϩά಺ͷॲ ཧΛมߋͨ͠৔߹ʹɺͦͷखॱΛ܁Γฦ͢ඞཁ͕ແ͘ͳΔɻ
  10. 39 entry: {
 main: './src',
 vendor: ["jquery", "mustache"],
 admin: './admin'


    }, νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍ entry: ‘./src’, νϡʔτϦΞϧ౳ͰΑ͘༻͍ΒΕΔྫ͕ͩ… ࣮ફͰ͸͜ͷΑ͏ʹͳΔͷͰ͸
  11. 40 entry: {
 main: './src',
 vendor: ["jquery", "mustache"],
 admin: './admin'


    }, νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍ entry: ‘./src’, νϡʔτϦΞϧ౳ͰΑ͘༻͍ΒΕΔྫ͕ͩ… ࣮ફͰ͸͜ͷΑ͏ʹͳΔͷͰ͸ ೚ҙʹࢦఆՄೳͳνϟϯΫ໊
  12. ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍ 43 module: {
 loaders: [
 {
 test: /\.js/,
 loader:

    'babel',
 include: __dirname + '/src',
 },
 {
 test: /\.scss/,
 loader: 'style!css!sass'
 },
 …
 ]
  13. ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍ 44 module: {
 loaders: [
 {
 test: /\.js/,
 loader:

    'babel',
 include: __dirname + '/src',
 },
 {
 test: /\.scss/,
 loader: 'style!css!sass'
 },
 …
 ] ͳͥɺtest ͳͷ͔ʁ
  14. CommonsChunkPlugin 50 Ծʹɺ͜ΜͳΤϯτϦʔϙΠϯτ͕͋ͬͨͱͯ͠ɺ entry: {
 pageA: "./pageA",
 pageB: "./pageB",
 pageC:

    "./pageC",
 adminPageA: "./adminPageA",
 adminPageB: "./adminPageB",
 adminPageC: "./adminPageC",
 }, ࣍ͷΑ͏ͳCommonsChunkPluginࢦఆ͕
 ͋ͬͨͱ͢Δͱɺ
  15. CommonsChunkPlugin 51 var webpack = require('webpack');
 … plugins: [ …


    new webpack.optimize.CommonsChunkPlugin({
 name: "admin-commons",
 chunks: ["adminPageA", "adminPageB"]
 }),
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons",
 chunks: ["pageA", "pageB", "admin-commons"],
 minChunks: 2
 }),
 new webpack.optimize.CommonsChunkPlugin({
 name: "c-commons",
 chunks: ["pageC", "adminPageC"]
 }),
 ],
  16. CommonsChunkPlugin 52 var webpack = require('webpack');
 … plugins: [ …


    new webpack.optimize.CommonsChunkPlugin({
 name: "admin-commons",
 chunks: ["adminPageA", "adminPageB"]
 }),
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons",
 chunks: ["pageA", "pageB", "admin-commons"],
 minChunks: 2
 }),
 new webpack.optimize.CommonsChunkPlugin({
 name: "c-commons",
 chunks: ["pageC", "adminPageC"]
 }),
 ],
  17. CommonsChunkPlugin 55 var webpack = require('webpack');
 … plugins: [ …


    new webpack.optimize.CommonsChunkPlugin({
 name: "admin-commons",
 chunks: ["adminPageA", "adminPageB"]
 }),
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons",
 chunks: ["pageA", "pageB", "admin-commons"],
 minChunks: 2
 }),
 new webpack.optimize.CommonsChunkPlugin({
 name: "c-commons",
 chunks: ["pageC", "adminPageC"]
 }),
 ],
  18. 66 αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠ plugins: [
 …
 new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 filename:

    'vendor.js',
 minChunks: Infinity,
 }), … ] chunks͕লུ͞Ε͍ͯΔͷͰɺ શͯͷνϟϯΫ͕ର৅Ͱ͋Δ͜ͱʹ΋஫ҙʂ chunks: …,
  19. 71 extract-text-webpack-plugin module: {
 loaders: [
 …
 {
 test: /\.scss/,


    loader: ExtractPlugin.extract('style', 'css!sass'),
 },
 …
 ],
 },
  20. 72 extract-text-webpack-plugin module: {
 loaders: [
 …
 {
 test: /\.scss/,


    loader: ExtractPlugin.extract('style', 'css!sass'),
 },
 …
 ],
 }, ൈ͖ग़͢͜ͱ͕Մೳͳ৔߹ʹ ߦ͏͜ͱ ൈ͖ग़͢͜ͱ͕ ग़དྷͳ͔ͬͨ৔߹ʹ ௥ՃͰߦ͏͜ͱ