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

Laravel Mixではじめるwebpack

2d1275668d7b6a47d4e29415994313b8?s=47 井上拓
February 16, 2019

Laravel Mixではじめるwebpack

広島フロントエンド勉強会 Vol.24の発表資料

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

February 16, 2019
Tweet

Transcript

  1. 201 ޿ౡϑϩϯτΤϯυษڧձ Vol.24 Laravel MixͰ͸͡ΊΔwebpack

  2. ޿ౡϑϩϯτΤϯυษڧձ

  3. ޿ౡϑϩϯτΤϯυษڧձ • 2016೥9݄9೔ʹൃ଍ • ࠓճͰ24ճ໨ • ͍͍݄ͩͨ1ճ։࠵ ޿ౡϑϩϯτΤϯυษڧձ͸޿ౡͰ׆ಈ͢ΔϑϩϯτΤϯυΤϯδχΞ ͷ೰ΈΛղܾ͢Δू·ΓͰ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϑϩϯτΤϯυͷٙ໰΍೰ΈΛղܾ͠·͠ΐ͏ɻ

    ڞʹٙ໰΍೰Έͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨ͯ͠޿ౡͷweb੍࡞ͷϨ ϕϧΞοϓΛ໨ࢦ͠·͢ɻ
  4. ޿ౡϑϩϯτΤϯυษڧձ σβΠϯ෦ • 2017೥4݄1೔ʹൃ଍ • 10ճ։࠵ • ͍͍ͩͨ2ϱ݄ʹ1ճ։࠵ ޿ౡͰwebσβΠϯΛओ࣠ʹͨ͠ษڧձ͕গͳ͘ɺ৘ใڞ༗Ͱ͖Δίϛϡχ ςΟʔ΋গͳ͍ͱͷ૬ஊΛड͚ɺ޿ౡϑϩϯτΤϯυษڧձͷ࢞ຓษڧձͱ

    ͯ͠ʮ޿ౡϑϩϯτΤϯυษڧձʙσβΠϯ෦ʙʯΛ্ཱͪ͛·ͨ͠ɻ πʔϧͷ࢖͍ํ͔ΒจࣈαΠζ΍ߦؒ͸Ͳ͏΍ܾͬͯΊΔ͔ͳͲૉ๿ͳٙ໰ ·ͰɺࢀՃऀશһͰ৘ใΛڞ༗͠ɺ޿ౡͷwebσβΠϯͷϨϕϧΞοϓΛ໨ ࢦ͠·͢ɻ
  5. ޿ౡϑϩϯτΤϯυษڧձ ຖ݄ͷษڧձͱ͸ผʹɺFacebookάϧʔϓͰ৘ใަ׵΍ަྲྀΛߦͳͬͯ ͍·͢ɻ ·ͨɺ։࠵৘ใ͸webϖʔδͱFacebookϖʔδɺFacebookάϧʔϓɺ TwitterΛ௨ͯ͡ൃ৴͍ͯ͠·͢ɻ ৄࡉ͸ΠϕϯτϖʔδΛ͝ཡ͍ͩ͘͞ https://hirofuro.org/

  6. ஫ҙࣄ߲ ޿ౡϑϩϯτΤϯυษڧձ͸ϘϥϯςΟΞϕʔεͰ։࠵͓ͯ͠Γɺ஌ࣝ ͷγΣΞɾॿ͚߹͍Ͱ੒Γཱͬͯ·͢ͷͰɺ͝ࢀՃͷࡍ͸͝ཧղɾ͝ڠ ྗ͓ئ͍͍ͨ͠·͢ɻ

  7. 201 ޿ౡϑϩϯτΤϯυษڧձ Vol.24 Laravel MixͰ͸͡ΊΔwebpack

  8. Q ·ͩϏϧυπʔϧͰ ফ໣ͯ͠Δͷʁ

  9. A ͯ͠·͢

  10. Q Ϗϧυπʔϧͳʹ࢖ͬͯ·͔͢ʁ

  11. Ϗϧυπʔϧͷมભ

  12. Ϗϧυπʔϧͷมભ

  13. Q ͳΜͰgulp΍Ίͨͷʁ

  14. A ܧ͗଍͠ܧ͗଍͠Ͱൿ఻ͷλϨΈ͍ͨʹͳ͔ͬͨΒ ࣮͸࢖ΘΕͯͳ͍λεΫ΋Ұॹʹಈ͍ͯΔ

  15. Q ͳΜͰLaravel Mixʹͨ͠ͷʁ

  16. A ϝΠϯͷϑϨʔϜϫʔΫ͕ FuelPHP͔ΒLaravelʹ มΘ͔ͬͨΒ

  17. Laravelͱ͸ʁ 2011೥6݄ʹϦϦʔε͞ΕͨɺΦʔϓϯιʔεͷPHPϑϨʔϜϫʔΫɻ ιʔείʔυ͸GitHubʹϗεςΟϯά͞Ε͍ͯͯɺGitHubͰͷελʔ ֫ಘ਺͕PHPϑϨʔϜϫʔΫͷதͰ࠷΋ଟ͍ɻ Laravelͷ໊લ͸ʰφϧχΞࠃ෺ޠʱʹొ৔͢ΔφϧχΞࠃͷԦ౎ɺέ ΞɾύϥϕϧʹͪͳΉͦ͏ɻ

  18. Laravel Mixͱ͸ʁ Laravelʹόϯυϧ͞Ε͍ͯΔɺϑϩϯτΤϯυϏϧυπʔϧɻ -BSBWFM.JYQSPWJEFTBqVFOU"1*GPSEFpOJOH8FCQBDLCVJMETUFQTGPSZPVS-BSBWFM BQQMJDBUJPOVTJOHTFWFSBMDPNNPO$44BOE+BWB4DSJQUQSFQSPDFTTPST IUUQTMBSBWFMDPNEPDTNJYJOUSPEVDUJPO Laravel Mix͸ଟ͘ͷҰൠతͳCSSͱJavaScriptͷϓϦϓϩηοαΛ࢖༻ ͠ɺLaravelΞϓϦέʔγϣϯͨΊʹɺWebpackͰͷϏϧυΛ؆୯ʹఆ ٛͰ͖ΔAPIΛఏڙ͍ͯ͠·͢ɻ

  19. None
  20. webpackͱ͸ʁ ؆୯͍ݴ͏ͱෳ਺ͷϑΝΠϧΛ̍ͭʹ·ͱΊͯ͘ΕΔɺϞδϡʔϧόϯ υϥɻ ґଘؔ܎Λ؅ཧͯ͘͠ΕΔͷ͸ͱͯ΋େ͖͍ ओʹJavaScriptͷϑΝΠϧΛ·ͱΊΔͷʹ࢖ΘΕ·͢ɻ gulpͷΑ͏ʹϓϥάΠϯͱ૊Έ߹ΘͤΔ͜ͱͰɺJSͷτϥϯεϨΠτ ΍SassͷίϯύΠϧͳͲϏϧυπʔϧͱͯ͠΋࢖͑Δ

  21. module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve('dist'), filename:

    'my-first-webpack.bundle.js' } }; XFCQBDLDPOpHKT
  22. Q webpackͰ͍͍͡Όͳ͍ͷʁ

  23. A ʮεϥεϥͱఆٛͰ͖Δʯ͕ϛι

  24. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  25. Laravel mixͷಋೖ

  26. Laravelͷಋೖ CSFXJOTUBMMDPNQPTFS DPNQPTFSDSFBUFQSPKFDUQSFGFSEJTUMBSBWFMMBSBWFM<QSPKFDUOBNF> Laravel͸ύοέʔδ؅ཧʹcomposerΛ࢖͏ͷͰΠϯετʔϧ composerΛ࢖͍ɺLaravelΛΠϯετʔϧ͢Δ

  27. Laravel Mixͷಋೖ npmύοέʔδΛΠϯετʔϧ OQNJOTUBMM OQNSVOXBUDI ର৅ϑΝΠϧΛ؂ࢹ͠มߋ͕͋Ε͹มߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ Node.jsͷΠϯετʔϧ (10.15.1 LTS) https://nodejs.org/ja/

    ऴྃ͸ctrl+c
  28. Q Laravel࢖Θͳ͍࣌΋ Πϯετʔϧ͠ͳ͍ͱ͍͚ͳ͍ͷʁ

  29. A ΋ͪΖΜLaravel Mix୯ମͰಈ࡞͠·͢

  30. https://github.com/JeffreyWay/laravel-mix GitHub͔Βμ΢ϯϩʔυͰ͖·͢ɻ

  31. Laravel Mixʹඞཁͳ΋ͷ MT BQQ   OPEF@NPEVMFT  SPVUFT BSUJTBO

      QBDLBHFMPDLKTPO TFSWFSQIQ CPPUTUSBQ  QBDLBHFKTPO  TUPSBHF DPNQPTFSKTPO QIQVOJUYNM  UFTUT DPNQPTFSMPDL QVCMJD  WFOEPS DPOpH  SFBENFNE  XFCQBDLNJYKT EBUBCBTF SFTPVSDFT
  32. A ඞཁͳͷ͸ package.jsonͱwebpack.mix.js͚ͩ

  33. { "private": true, "scripts": { "dev": "npm run development", "development":

    "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js -- progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack- dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no- progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.22" } } QBDLBHFKTPO
  34. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  35. Laravel Mixͷಋೖ OQNJOTUBMM OQNSVOXBUDI package.jsonͱwebpack.mix.jsΛ࣋ͬͯ͘Δ͚ͩͰ͙͢ʹ࢝ΊΒΕ· ͢ɻ

  36. ϋϯζΦϯ

  37. https://github.com/takanashi66/hirofuro24 GitHub͔Βμ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ σϞ༻ϦϙδτϦ

  38. Laravel Mixͷಋೖ npmύοέʔδΛΠϯετʔϧ OQNJOTUBMM OQNSVOXBUDI ର৅ϑΝΠϧΛ؂ࢹ͠มߋ͕͋Ε͹มߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ Node.jsͷΠϯετʔϧ (10.15.1 LTS) https://nodejs.org/ja/

  39. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sass('resources/sass/style.scss', 'public/css');

    XFCQBDLNJYKT
  40. Q ͜Ε͚ͩ͡Ό଍Γͳ͍ JavaScript͸Vue.jsͰॻ͖͍ͨ

  41. A webpack.mix.jsʹ௥ه͠·͠ΐ͏

  42. var Vue = require('vue') var app = new Vue({ el:

    '#app', data: { message: 'Hello Laravel Vue!' } }) WVFBQQKT
  43. <div class="main"> <div id="app"> {{ message }} </div> </div> JOEFYIUNM

  44. const mix = require('laravel-mix'); mix .js('resources/js/app.js', 'public/js'); .vue('resources/js/vueapp.js', 'public/js') .sass('resources/sass/app.scss',

    'public/css') .sass('resources/sass/style.scss', 'public/css'); XFCQBDLNJYKT
  45. { "private": true, "scripts": { ~~ུ~~ }, "devDependencies": { "axios":

    "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.22" } } QBDLBHFKTPO
  46. A Laravel͸Vue.jsਪ͠Β͍͠

  47. Q ReactͰॻ͖͍ͨ

  48. A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹ௥ه͠·͠ΐ͏

  49. Browsersyncͷಋೖ OQNJOTUBMM%SFBDUSFBDUEPN Reactຊମͱɺreact-domΛΠϯετʔϧ͠·͢ɻ

  50. const mix = require('laravel-mix'); mix.react('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  51. Q ιʔεϚοϓ͕࢖͍͍ͨ

  52. A ؆୯ʹͰ͖·͢ ʢόά͋Γʣ

  53. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .vue('resources/js/vueapp.js', 'public/js') .sass('resources/sass/app.scss', 'public/css')

    .sass('resources/sass/style.scss', 'public/css') .sourceMaps() XFCQBDLNJYKT
  54. None
  55. None
  56. ιʔεϚοϓͷಋೖ NJYTPVSDF.BQT ιʔεϚοϓΛCSSͱJavaScriptʹදࣔ͠·͢ CSSͷιʔεϚοϓʹόά͕͋Γɺ௥ه͕ඞཁ NJYXFCQBDL$POpH \EFWUPPMJOMJOFTPVSDFNBQ^ 

  57. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .vue('resources/js/vueapp.js', 'public/js') .sass('resources/sass/app.scss', 'public/css')

    .sass('resources/sass/style.scss', 'public/css') .sourceMaps() mix.webpackConfig({ devtool: "inline-source-map" }); XFCQBDLNJYKT
  58. None
  59. None
  60. Q Browsersync͕࢖͍͍ͨ

  61. A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹ௥ه͠·͠ΐ͏

  62. Browsersyncͷಋೖ OQNJOTUBMM%CSPXTFSTZODCSPXTFSTZODXFCQBDLQMVHJO BroesersyncຊମͱɺWebpack༻ͷϓϥάΠϯΛΠϯετʔϧ͠·͢ɻ

  63. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .vue('resources/js/vueapp.js', 'public/js') .sass('resources/sass/app.scss', 'public/css')

    .sass('resources/sass/style.scss', 'public/css') mix.browserSync({ server: 'public', proxy: false, files: [ 'public/**/*.html', 'public/js/*.js', 'public/css/*.css', ] }) XFCQBDLNJYKT
  64. Q autoprefixer͕ͷઃఆ͕͍ͨ͠

  65. A webpack.mix.jsʹ ΦϓγϣϯΛ௥ه͠·͠ΐ͏

  66. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .vue('resources/js/vueapp.js', 'public/js') .sass('resources/sass/app.scss', 'public/css')

    .sass('resources/sass/style.scss', 'public/css') ɹɹ .options({ autoprefixer: { browsers: ['last 2 versions'], options: { grid: true, } } }); XFCQBDLNJYKT
  67. Q PostCSSͷϓϥάΠϯ CSS MQPacker͕࢖͍͍ͨ

  68. A webpack.mix.jsʹ ΦϓγϣϯΛ௥ه͠·͠ΐ͏

  69. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .vue('resources/js/vueapp.js', 'public/js') .sass('resources/sass/app.scss', 'public/css')

    .sass('resources/sass/style.scss', 'public/css') ɹɹ .options({ postCss: [ require('css-mqpacker')() ], autoprefixer: { browsers: ['last 2 versions'], options: { grid: true, } } }); XFCQBDLNJYKT
  70. ͋Γ͕ͱ͏͍͟͝·ͨ͠