Laravel Mixではじめるwebpack

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
    .JY
    QSPWJEFT
    B
    qVFOU
    "1*
    GPS
    EFpOJOH
    8FCQBDL
    CVJME
    TUFQT
    GPS
    ZPVS
    -BSBWFM
    BQQMJDBUJPO
    VTJOH
    TFWFSBM
    DPNNPO
    $44
    BOE
    +BWB4DSJQU
    QSFQSPDFTTPST
    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ͷಋೖ 
    CSFX
    JOTUBMM
    DPNQPTFS 
    DPNQPTFS
    DSFBUFQSPKFDU
    QSFGFSEJTU
    MBSBWFMMBSBWFM
    <QSPKFDUOBNF> Laravel͸ύοέʔδ؅ཧʹcomposerΛ࢖͏ͷͰΠϯετʔϧ composerΛ࢖͍ɺLaravelΛΠϯετʔϧ͢Δ

27. Laravel Mixͷಋೖ npmύοέʔδΛΠϯετʔϧ 
    OQN
    JOTUBMM 
    OQN
    SVO
    XBUDI ର৅ϑΝΠϧΛ؂ࢹ͠มߋ͕͋Ε͹มߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ 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ͷಋೖ 
    OQN
    JOTUBMM 
    OQN
    SVO
    XBUDI package.jsonͱwebpack.mix.jsΛ࣋ͬͯ͘Δ͚ͩͰ͙͢ʹ࢝ΊΒΕ· ͢ɻ

36. ϋϯζΦϯ

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

38. Laravel Mixͷಋೖ npmύοέʔδΛΠϯετʔϧ 
    OQN
    JOTUBMM 
    OQN
    SVO
    XBUDI ର৅ϑΝΠϧΛ؂ࢹ͠มߋ͕͋Ε͹มߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ 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ͷಋೖ 
    OQN
    JOTUBMM
    %
    SFBDU
    SFBDUEPN 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 \
    EFWUPPM
    JOMJOFTPVSDFNBQ
    ^ 

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ͷಋೖ 
    OQN
    JOTUBMM
    %
    CSPXTFSTZOD
    CSPXTFSTZODXFCQBDLQMVHJO 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. ͋Γ͕ͱ͏͍͟͝·ͨ͠