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͕ԿނඞཁͰɺ
    Կނ෼͔ΓͮΒ͍ͷ͔
    @tomof
    1

    View full-size slide

  2. ໨࣍
    1. Կނwebpackͳͷ͔ʁ
    2. webpackೖ໳
    3. webpack͸Կނ͜Μͳʹ΋෼͔ΓͮΒ͍ͷ͔?
    4. ·ͱΊ
    2

    View full-size slide

  3. 1. Կނwebpackͳͷ͔ʁ
    3

    View full-size slide

  4. طଘͷπʔϧ͸Կ͕ବ໨ͩͬͨͷ͔ʁ
    4

    View full-size slide

  5. 5
    େن໛ͳϓϩδΣΫτʹ͸
    ద͍ͯ͠ͳ͍

    View full-size slide

  6. զʑ͸ɺ1ͭͷڊେͳϑΝΠϧʹ࿈݁͢ΔΑ͏ɺ
    ڭҭ͞Εͯ͠·ͬͨʂʂ
    6

    View full-size slide

  7. طଘͷπʔϧΛ࢖ͬͯ
    ղܾͰ͖ͳ͔ͬͨͷ͔ʁ
    7

    View full-size slide

  8. 8
    ֦ுΛࢼΈ͕ͨ
    ্ख͘ߦ͔ͳ͔ͬͨ

    View full-size slide

  9. webpackͷ໨త
    • ґଘੑͷ͋ΔπϦʔߏ଄ΛɺಡΈࠐΈ࣌ͷඞཁੑʹԠͯ͡

    νϟϯΫ(chunk/ݻ·Γ)ຖʹ෼ׂ͢Δɻ
    • ॳճͷಡΈࠐΈ࣌ؒΛ୹͘͢Δ(อͭ)ɻ
    • શͯͷ੩తΞηοτΛϞδϡʔϧʹ͢Δ͜ͱ͕ग़དྷΔɻ
    • େن໛ϓϩδΣΫτʹదͨ͠࢓૊Έɻ
    9

    View full-size slide

  10. खಈͰղܾͰ͖ͳ͍͔ʁ
    • ґଘੑͷղܾɺඇಉظಡΈࠐΈ
    • ؾ͕ڰ͍ͦ͏…ɻ
    10

    View full-size slide

  11. webpackʹҕͶΔࣗಈԽͷઃఆ
    • ෼ׂͨ͠ϑΝΠϧαΠζ͕খ͗͢͞Δ৔߹͸ɺ

    ෼ׂ͠ͳ͍ͱ͍͏ઃఆ
    • ը૾αΠζ͕খ͚͞Ε͹ΠϯϥΠϯԽɺ

    େ͖͚Ε͹URLͰಡΈࠐΈɻ
    11
    background-image: url('../img/puppy.jpg');
    background-image: url(‘data:image/png;base64, iVB0Rw0…’);
    size

    size

    View full-size slide

  12. • webpack your bags ͷ Maxime Fabre ࢯ
    – طଘͷπʔϧͰຬ଍͍ͯͨ͠͠ɺ࠷ॳʹwebpackͷ֓ཁʹ໨Λ
    ௨ͨ࣌͠ʹΠϥοͱͯ͠λϒΛดͨ͡ɻ
    – ࠓ͸શͯΛwebpackʹҕͶͯ͠·͑ͱͳ͍ͬͯΔɻ
    12
    webpackΛ࢖ͬͨਓͷײ૝

    View full-size slide

  13. 2. webpackೖ໳
    13

    View full-size slide

  14. webpackΛ࢖༻͢Δʹ͸?
    1. webpackΛΠϯετʔϧ
    2. webpack.config.jsʹઃఆΛॻ͖ࠐΉ
    3. webpack͔Βఏڙ͞ΕΔrequireؔ਺ʹΑͬ
    ͯɺϞδϡʔϧͷಡΈࠐΈΛߦ͏ɻ
    4. ϏϧυίϚϯυΛ࣮ߦ
    14

    View full-size slide

  15. webpack.config.js
    • ࠷ऴతʹ module.exports ʹΦϒδΣΫΛࢦఆ͢Δ
    15
    module.exports = {

    entry: …,

    output: {…},

    module: {

    loaders: [
    …

    ],

    },
    plugins: […],
    ɹ…

    };

    View full-size slide

  16. webpack.config.js
    • ΤϯτϦϙΠϯτ = JavaScript࣮ߦͷೖΓޱͱͳΔϑΝΠϧΛࢦఆ
    16
    module.exports = {

    entry: …,

    output: {…},

    module: {

    loaders: [
    …

    ],

    },
    plugins: […],
    ɹ…

    };

    View full-size slide

  17. webpack.config.js
    17
    module.exports = {

    entry: …,

    output: {…},

    module: {

    loaders: [
    …

    ],

    },
    plugins: […],
    ɹ…

    };
    • ग़ྗϑΝΠϧͷઃఆ

    View full-size slide

  18. webpack.config.js
    • ϩʔμʔͷઃఆ
    18
    module.exports = {

    entry: …,

    output: {…},

    module: {

    loaders: [
    …

    ],

    },
    plugins: […],
    ɹ…

    };

    View full-size slide

  19. webpack.config.js
    • ϓϥάΠϯͷઃఆ
    19
    module.exports = {

    entry: …,

    output: {…},

    module: {

    loaders: [
    …

    ],

    },
    plugins: […],
    ɹ…

    };

    View full-size slide

  20. ϏϧυίϚϯυΛ࣮ߦ
    20

    View full-size slide

  21. webpack༻ޠ
    • νϟϯΫ
    • ϩʔμʔ
    • ϓϥάΠϯ
    • HMR (Hot Module Replacement)
    21

    View full-size slide

  22. νϟϯΫ
    22
    1νϟϯΫ=࠷ऴతʹ1ϑΝΠϧʹग़ྗ͞ΕΔͱ͸ݶΒͳ͍?
    (͜͜Ͱ͸ɺϓϥάΠϯ͕ɺCSSΛൈ͖ग़ͯ͠ผϑΝΠϧʹ෼཭)
    • ίʔυͷݻ·Γ

    View full-size slide

  23. ϩʔμʔ
    23
    • Ϟδϡʔϧͱͯ͠ಡΈࠐΊΔΑ͏ʹ͢ΔͨΊͷ࢓૊Έ
    • loaderͷଞʹpreLoader(લ)ɺpostLoader(ޙ)͕͋Δ
    – preLoader : ओʹlintܥͷॲཧͰ࢖༻͞ΕΔ
    – postLoader : ओʹίʔυΧόϨοδͷॲཧͰ࢖༻͞ΕΔ

    View full-size slide

  24. ϩʔμʔͷઃఆྫ
    24
    module: {

    loaders: [

    {

    test: /\.js/,

    loader: 'babel',

    include: __dirname + '/src',

    },

    {

    test: /\.scss/,

    loader: 'style!css!sass'

    },

    …

    ]

    View full-size slide

  25. ϩʔμʔͷνΣʔϯ
    25
    • νΣʔϯͰܨ͛Δ͜ͱ͕Մೳɻ
    ྫ)ɹ'style!css!sass'
    1. SassΛCSSʹม׵
    2. CSSΛJavaScriptʹจࣈྻͱͯ͠ಡΈࠐΉ
    3. ಡΈࠐΜͩจࣈྻΛλάͱͯ͠<head>಺ʹ௥Ճ<br/>.sass .css<br/>HTML<br/><style><br/>body: {…}<br/>header:<br/>{…}<br/>1 2 3<br/>

    View full-size slide

  26. ϩʔμʔΛconfigʹઃఆ͢Δ͜ͱͰ…
    26
    require("!style!css!./style.css");
    require("./style.css");

    View full-size slide

  27. ϓϥάΠϯ͕ߦ͏͜ͱʢ̍ʣ
    27
    • ϩʔμʔʹΑͬͯग़ྗ͞ΕͨϑΝΠϧʹରͯ͠Կ͔Λ
    ߦ͏
    –ɹѹॖԽ ɾ೉ಡԽ
    –ɹڞ௨͢ΔίʔυΛҰవΊʹͯ͠ผϑΝΠϧʹൈ͖ग़͢
    –ɹಛఆͷαΠζʹຬͨͳ͍ϑΝΠϧͷ෼ׂΛऔΓ΍ΊΔ

    View full-size slide

  28. 28
    • ϩʔμʔͷ໾ׂ͔Β֎ΕΔ͜ͱΛ୲͏
    –ɹग़ྗϑΥϧμ಺ΛΫϦʔϯΞοϓ͢Δ
    –ɹwebpackͷग़ྗ಺༰ʹ߹ΘͤͯಈతʹHTMLΛੜ੒͢Δ
    ϓϥάΠϯ͕ߦ͏͜ͱʢ̎ʣ

    View full-size slide

  29. HMR
    29
    • Hot Module Replacement
    • ΦʔτϦϩʔυ͸ϖʔδશମΛ࠶ಡࠐΈ͢Δ͕ɺHMR͸࠶ಡ
    ࠐ͢Δ͜ͱແ͘ɺมߋ͞ΕͨՕॴ͚ͩΛಈతʹஔ׵͢Δɻ
    • ྫ͑͹ɺ͋ΔखॱΛز͔ͭ౿ΜͰදࣔͨ͠μΠΞϩά಺ͷॲ
    ཧΛมߋͨ͠৔߹ʹɺͦͷखॱΛ܁Γฦ͢ඞཁ͕ແ͘ͳΔɻ

    View full-size slide

  30. web-dev-serverͬͯʁ
    30
    • Expressϕʔεͷ։ൃ༻αʔόʔ
    • ΦʔτϦϩʔυ΍HMRΛαϙʔτ
    • /webpack-dev-server/ʹiframeΛ࢖༻ͨ͠

    ಛผͳ؀ڥΛఏڙ

    View full-size slide

  31. web-dev-serverΛ࢖༻͢Δʹ͸ʁ
    1. webpack-dev-serverΛΠϯετʔϧ
    2. webpack.config.js·ͨ͸ίϚϯυϥΠϯҾ਺ʹઃఆ
    Λࢦఆͯ͠ɺίϚϯυͰαʔόʔΛ্ཱͪ͛Δɻ
    3. localhost:8080 ·ͨ͸ɺ

    localhost:8080/webpack-dev-server/ Ͱ֬ೝ

    (8080͸σϑΥϧτઃఆͷϙʔτ൪߸)
    31

    View full-size slide

  32. 3. webpack͸Կނ͜Μͳʹ΋
    ɹ෼͔ΓͮΒ͍ͷ͔?
    32

    View full-size slide

  33. 33
    ෼͔ΓͮΒ͍ݪҼ
    • ઃఆͷࢦఆ
    –ɹઃఆͷΩʔɾ஋ͳͲʹҰ؏ੑ͕ແ͍ɻ
    –ɹϓϥάΠϯͷಈ࡞͕΍΍͍͜͠ɻ
    • υΩϡϝϯτྨ
    –ɹቕΓͦ͏ͳϙΠϯτ΍෼͔ΓͮΒ͍ϙΠϯτΛ

    ڧௐͨ͠ΓɺԿނͦ͏ͳͷ͔ʁͱ͍ͬͨઆ໌͕

    ෆ଍͍ͯ͠Δɻ

    View full-size slide

  34. 34
    entry: ‘./src’,
    entry: ‘./src/*’,
    ʁ
    gulp.src(“./path/to/**/*.js”) ʹ
    ͍ۙײ͡ʁ
    webpack.config.jsͷentryύεࢦఆʹቕͬͨ

    View full-size slide

  35. entry: ‘./src/*’,
    entry: ‘./src’,
    35
    ʁ
    webpack.config.jsͷentryύεࢦఆʹቕͬͨ
    ҧͬͨ

    View full-size slide

  36. entry: ‘./src’,
    entry: ‘./src/index.js’,
    36
    webpack.config.jsͷentryύεࢦఆʹቕͬͨ

    View full-size slide

  37. 37
    webpack.config.jsͷentryύεࢦఆʹቕͬͨ
    ͦͷҰํͰ…
    output: {

    …

    path: ‘./builds’
    …

    },
    outputͷpathͳͲɺϑΥϧμΛࣔ͢ઃఆ΋͋Δɻ

    View full-size slide

  38. 38
    entry: ‘./src’,
    ࣮͸”main”ͱ͍͏νϟϯΫ໊͕ࣗಈతʹ෇͚ΒΕ͍ͯΔɻ
    output: {

    filename: '[name]-bundle.js',


    },
    νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍
    main-bundle.js

    View full-size slide

  39. 39
    entry: {

    main: './src',

    vendor: ["jquery", "mustache"],

    admin: './admin'

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

    View full-size slide

  40. 40
    entry: {

    main: './src',

    vendor: ["jquery", "mustache"],

    admin: './admin'

    },
    νϟϯΫ໊ͷ໊෇͚ͱ࢖༻ํ๏͕આ໌ෆ଍
    entry: ‘./src’,
    νϡʔτϦΞϧ౳ͰΑ͘༻͍ΒΕΔྫ͕ͩ…
    ࣮ફͰ͸͜ͷΑ͏ʹͳΔͷͰ͸
    ೚ҙʹࢦఆՄೳͳνϟϯΫ໊

    View full-size slide

  41. 41
    • ϩʔμʔͷνΣʔϯ͸ɺԿނӈ͔Βࠨͳͷ͔ʁ
    ϩʔμʔઃఆͷॻ͖ํ
    ɹ ’style!css!sass’

    View full-size slide

  42. 42
    • ͜͏͍͏͜ͱͳͷ͔ʁ
    ϩʔμʔઃఆͷॻ͖ํ
    style( css( sass( ) ) )
    ΋ͦ͠͏ͳΒɺҰݴॻ͍ͯ͘ΕΕ͹͍͍ͷʹ…ɻ

    View full-size slide

  43. ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍
    43
    module: {

    loaders: [

    {

    test: /\.js/,

    loader: 'babel',

    include: __dirname + '/src',

    },

    {

    test: /\.scss/,

    loader: 'style!css!sass'

    },

    …

    ]

    View full-size slide

  44. ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍
    44
    module: {

    loaders: [

    {

    test: /\.js/,

    loader: 'babel',

    include: __dirname + '/src',

    },

    {

    test: /\.scss/,

    loader: 'style!css!sass'

    },

    …

    ]
    ͳͥɺtest ͳͷ͔ʁ

    View full-size slide

  45. ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍
    45
    JavaScriptͷਖ਼نදݱͷtest()ϝιουʹ༝དྷʁ
    © 2005-2016 Mozilla Developer Network & ߩݙऀ֤ਓ

    View full-size slide

  46. ϓϥάΠϯ͕೉͍͠…
    46
    • ࣮ફͰආ͚ͯ͸௨Εͳ͍͚Ͳཧղ͕೉͍͠ϓϥάΠϯ
    –ɹCommonsChunkPluginɹ(webpackެࣜ)
    –ɹextract-text-webpack-plugin

    View full-size slide

  47. CommonsChunkPlugin
    47
    • ֤νϟϯΫͰڞ௨(ॏෳ)͢ΔϞδϡʔϧΛൈ͖ग़ͯ͠ผ
    ϑΝΠϧʹ·ͱΊͯ͘ΕΔϓϥάΠϯ
    • αʔυύʔςΟ੡ͷϞδϡʔϧ͚ͩΛ·ͱΊͨ

    vendor.jsΛ࡞Δͷʹ΋࢖༻͞ΕΔ͕ɺ͜Ε͕

    ඇৗʹ෼͔ΓͮΒ͔ͬͨɻ

    View full-size slide

  48. CommonsChunkPlugin
    48
    • ͪͳΈʹɺ͜ͷϓϥάΠϯΛ࢖༻͠ͳ͍ͱ…

    webpack͸࠷௿ݶͷ࠷దԽ͔͠ߦΘͳ͍ͨΊɺ

    View full-size slide

  49. CommonsChunkPlugin
    49
    • ڞ௨ͯ͠࢖༻͞ΕΔϥΠϒϥϦ΍Ϟδϡʔϧ͕

    ෳ਺ͷνϟϯΫͰಡΈࠐ·Εͯ͠·͏ɻ

    View full-size slide

  50. CommonsChunkPlugin
    50
    Ծʹɺ͜ΜͳΤϯτϦʔϙΠϯτ͕͋ͬͨͱͯ͠ɺ
    entry: {

    pageA: "./pageA",

    pageB: "./pageB",

    pageC: "./pageC",

    adminPageA: "./adminPageA",

    adminPageB: "./adminPageB",

    adminPageC: "./adminPageC",

    },
    ࣍ͷΑ͏ͳCommonsChunkPluginࢦఆ͕

    ͋ͬͨͱ͢Δͱɺ

    View full-size slide

  51. 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"]

    }),

    ],

    View full-size slide

  52. 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"]

    }),

    ],

    View full-size slide

  53. CommonsChunkPlugin
    53
    adminPageA
    adminUkl
    adminAcontroller
    projectUkl
    adminPageB
    adminUkl
    adminBcontroller
    projectUkl

    View full-size slide

  54. CommonsChunkPlugin
    54
    admin-commons
    adminUkl
    projectUkl
    adminPageA
    adminAcontroller
    adminPageB
    adminBcontroller

    View full-size slide

  55. 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"]

    }),

    ],

    View full-size slide

  56. CommonsChunkPlugin
    56
    admin-commons
    adminUkl
    projectUkl
    pageA
    projectUkl
    pageAcontroller
    pageB
    projectUkl
    pageBcontroller

    View full-size slide

  57. CommonsChunkPlugin
    57
    admin-commons
    adminUkl
    pageA
    pageAcontroller
    pageB
    pageBcontroller
    commons
    projectUkl

    View full-size slide

  58. CommonsChunkPluginͷओͳΦϓγϣϯ
    • nameɿڞ௨νϟϯΫͷ໊લ 

    ͪͳΈʹnames΋ଘࡏ͢Δ(഑ྻΛࢦఆ)
    • chunksɿର৅ͱ͢ΔνϟϯΫ

    ʢলུ͢ΔͱɺશͯͷνϟϯΫ͕ର৅ʂ)
    • minChunksɿ͜ͷ਺ͷνϟϯΫͰ࢖༻͞Ε͍ͯͨΒର৅

    (2ճʙνϟϯΫ਺ or Infinity or ؔ਺)
    58

    View full-size slide

  59. αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠
    59
    vendor

    View full-size slide

  60. 60


    vendor.jsʹ͸ɺ७ਮʹ3rdύʔςΟͷίʔυ͕
    ࿈݁͞Εͨ΋ͷ͚ͩΛؚΊ͍ͨɻ
    αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠

    View full-size slide

  61. 61
    αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠
    entry: {

    main: './src',

    vendor: ["jquery", "moment", "underscore"],

    admin: './admin'

    },

    View full-size slide

  62. 62
    αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠
    entry: {

    main: './src',

    vendor: ["jquery", "moment", "underscore"],

    admin: './admin'

    },

    View full-size slide

  63. 63
    αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠
    plugins: [

    …

    new webpack.optimize.CommonsChunkPlugin({

    name: 'vendor',

    filename: 'vendor.js',

    minChunks: Infinity,

    }),

    ]

    View full-size slide

  64. 64
    αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠
    plugins: [

    …

    new webpack.optimize.CommonsChunkPlugin({

    name: 'vendor',

    filename: 'vendor.js',

    minChunks: Infinity,

    }),

    ]
    Infinity !?

    View full-size slide

  65. 65
    vendor
    CommonsChunkPlugin
    Infinity
    vendorҎ֎ͷϞδϡʔϧ vendorҎ֎ͷϞδϡʔϧ vendorҎ֎ͷϞδϡʔϧ

    View full-size slide

  66. 66
    αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠
    plugins: [

    …

    new webpack.optimize.CommonsChunkPlugin({

    name: 'vendor',

    filename: 'vendor.js',

    minChunks: Infinity,

    }),

    ]
    chunks͕লུ͞Ε͍ͯΔͷͰɺ
    શͯͷνϟϯΫ͕ର৅Ͱ͋Δ͜ͱʹ΋஫ҙʂ
    chunks: …,

    View full-size slide

  67. CommonsChunkPlugin
    67
    app
    app
    appController
    pageA
    pageAcontroller
    admin
    adminController
    admin
    શͯͷνϟϯΫ͔Β

    View full-size slide

  68. CommonsChunkPlugin
    68
    app
    app
    appController
    pageA
    pageAcontroller
    admin
    adminController
    admin
    vendor νϟϯΫͷ
    ϞδϡʔϧΛ(࣮࣭)ൈ͖ग़͚ͩ͢(?)

    View full-size slide

  69. 69
    extract-text-webpack-plugin
    • ࠷ऴతͳόϯυϧ͔Βಛఆͷछྨͷ

    ίϯςϯπΛूΊɺ ଞͷ΋ͷͱύΠϓ͢Δɻ
    • ΄ͱΜͲ͕ɺCSSͷͨΊʹ࢖༻͞ΕΔɻ
    • ϖʔδͷॳظදࣔ࣌ʹɺCSS͕ಈతʹಡΈࠐ·ΕΔ͜ͱ
    ʹΑͬͯى͖Δνϥ͖ͭͷ๷ࢭɻ

    View full-size slide

  70. 70
    extract-text-webpack-plugin
    var ExtractPlugin = require('extract-text-webpack-plugin');
    var plugins = [

    …

    new ExtractPlugin(‘bundle.css'),
    …

    ];

    View full-size slide

  71. 71
    extract-text-webpack-plugin
    module: {

    loaders: [

    …

    {

    test: /\.scss/,

    loader: ExtractPlugin.extract('style', 'css!sass'),

    },

    …

    ],

    },

    View full-size slide

  72. 72
    extract-text-webpack-plugin
    module: {

    loaders: [

    …

    {

    test: /\.scss/,

    loader: ExtractPlugin.extract('style', 'css!sass'),

    },

    …

    ],

    },
    ൈ͖ग़͢͜ͱ͕Մೳͳ৔߹ʹ
    ߦ͏͜ͱ
    ൈ͖ग़͢͜ͱ͕
    ग़དྷͳ͔ͬͨ৔߹ʹ
    ௥ՃͰߦ͏͜ͱ

    View full-size slide

  73. νϡʔτϦΞϧ΍ϒϩάهࣄʹ஫ҙ
    • ͜ΕΒʹԊͬͯࢼ͚ͩ͢Ͱ͸ɺటপʹ͸·Δɻ
    • େࣄͳઆ໌΍ิ଍͕ল͔Ε͍ͯΔ͜ͱ͕ଟ͍ɻ
    74

    View full-size slide

  74. ެࣜυΩϡϝϯτΛಡΈղ͘
    75

    View full-size slide

  75. ެࣜυΩϡϝϯτΛಡΈղ͘
    76
    ίϝϯτΛؚΊ…ʢٽʣ

    View full-size slide

  76. webpack2 / ৽υΩϡϝϯταΠτ
    77

    View full-size slide

  77. ͝ਗ਼ௌɺ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    78

    View full-size slide