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

96b4013c20d6ff6c2371605870167b3c?s=47 tomof
November 20, 2016

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

96b4013c20d6ff6c2371605870167b3c?s=128

tomof

November 20, 2016
Tweet

Transcript

  1. 12.

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

    ௨ͨ࣌͠ʹΠϥοͱͯ͠λϒΛดͨ͡ɻ – ࠓ͸શͯΛwebpackʹҕͶͯ͠·͑ͱͳ͍ͬͯΔɻ 12 webpackΛ࢖ͬͨਓͷײ૝
  2. 15.

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

    …,
 output: {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  3. 16.

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

    …,
 output: {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  4. 17.

    webpack.config.js 17 module.exports = {
 entry: …,
 output: {…},
 module:

    {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 }; • ग़ྗϑΝΠϧͷઃఆ
  5. 18.

    webpack.config.js • ϩʔμʔͷઃఆ 18 module.exports = {
 entry: …,
 output:

    {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  6. 19.

    webpack.config.js • ϓϥάΠϯͷઃఆ 19 module.exports = {
 entry: …,
 output:

    {…},
 module: {
 loaders: [ …
 ],
 }, plugins: […], ɹ…
 };
  7. 24.

    ϩʔμʔͷઃఆྫ 24 module: {
 loaders: [
 {
 test: /\.js/,
 loader:

    'babel',
 include: __dirname + '/src',
 },
 {
 test: /\.scss/,
 loader: 'style!css!sass'
 },
 …
 ]
  8. 25.

    ϩʔμʔͷνΣʔϯ 25 • νΣʔϯͰܨ͛Δ͜ͱ͕Մೳɻ ྫ)ɹ'style!css!sass' 1. SassΛCSSʹม׵ 2. CSSΛJavaScriptʹจࣈྻͱͯ͠ಡΈࠐΉ 3.

    ಡΈࠐΜͩจࣈྻΛ<style>λάͱͯ͠<head>಺ʹ௥Ճ .sass .css HTML <style> body: {…} header: {…} 1 2 3
  9. 29.

    HMR 29 • Hot Module Replacement • ΦʔτϦϩʔυ͸ϖʔδશମΛ࠶ಡࠐΈ͢Δ͕ɺHMR͸࠶ಡ ࠐ͢Δ͜ͱແ͘ɺมߋ͞ΕͨՕॴ͚ͩΛಈతʹஔ׵͢Δɻ •

    ྫ͑͹ɺ͋ΔखॱΛز͔ͭ౿ΜͰදࣔͨ͠μΠΞϩά಺ͷॲ ཧΛมߋͨ͠৔߹ʹɺͦͷखॱΛ܁Γฦ͢ඞཁ͕ແ͘ͳΔɻ
  10. 39.

    39 entry: {
 main: './src',
 vendor: ["jquery", "mustache"],
 admin: './admin'


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

    40 entry: {
 main: './src',
 vendor: ["jquery", "mustache"],
 admin: './admin'


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

    ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍ 43 module: {
 loaders: [
 {
 test: /\.js/,
 loader:

    'babel',
 include: __dirname + '/src',
 },
 {
 test: /\.scss/,
 loader: 'style!css!sass'
 },
 …
 ]
  14. 44.

    ઃఆͷΩʔɾ஋͕෼͔ΓͮΒ͍ 44 module: {
 loaders: [
 {
 test: /\.js/,
 loader:

    'babel',
 include: __dirname + '/src',
 },
 {
 test: /\.scss/,
 loader: 'style!css!sass'
 },
 …
 ] ͳͥɺtest ͳͷ͔ʁ
  15. 50.

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

    "./pageC",
 adminPageA: "./adminPageA",
 adminPageB: "./adminPageB",
 adminPageC: "./adminPageC",
 }, ࣍ͷΑ͏ͳCommonsChunkPluginࢦఆ͕
 ͋ͬͨͱ͢Δͱɺ
  16. 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"]
 }),
 ],
  17. 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"]
 }),
 ],
  18. 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"]
 }),
 ],
  19. 66.

    66 αʔυύʔςΟϥΠϒϥϦ͚ͩΛ෼཭͍ͨ͠ plugins: [
 …
 new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 filename:

    'vendor.js',
 minChunks: Infinity,
 }), … ] chunks͕লུ͞Ε͍ͯΔͷͰɺ શͯͷνϟϯΫ͕ର৅Ͱ͋Δ͜ͱʹ΋஫ҙʂ chunks: …,
  20. 68.
  21. 71.

    71 extract-text-webpack-plugin module: {
 loaders: [
 …
 {
 test: /\.scss/,


    loader: ExtractPlugin.extract('style', 'css!sass'),
 },
 …
 ],
 },
  22. 72.

    72 extract-text-webpack-plugin module: {
 loaders: [
 …
 {
 test: /\.scss/,


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