Laravel Mixではじめるwebpack

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

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Λఏڙ͍ͯ͠·͢ɻ
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
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
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. ͋Γ͕ͱ͏͍͟͝·ͨ͠