Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

޿ౡϑϩϯτΤϯυษڧձ • 2016೥9݄9೔ʹൃ଍ • ࠓճͰ24ճ໨ • ͍͍݄ͩͨ1ճ։࠵ ޿ౡϑϩϯτΤϯυษڧձ͸޿ౡͰ׆ಈ͢ΔϑϩϯτΤϯυΤϯδχΞ ͷ೰ΈΛղܾ͢Δू·ΓͰ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϑϩϯτΤϯυͷٙ໰΍೰ΈΛղܾ͠·͠ΐ͏ɻ ڞʹٙ໰΍೰Έͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨ͯ͠޿ౡͷweb੍࡞ͷϨ ϕϧΞοϓΛ໨ࢦ͠·͢ɻ

Slide 4

Slide 4 text

޿ౡϑϩϯτΤϯυษڧձ σβΠϯ෦ • 2017೥4݄1೔ʹൃ଍ • 10ճ։࠵ • ͍͍ͩͨ2ϱ݄ʹ1ճ։࠵ ޿ౡͰwebσβΠϯΛओ࣠ʹͨ͠ษڧձ͕গͳ͘ɺ৘ใڞ༗Ͱ͖Δίϛϡχ ςΟʔ΋গͳ͍ͱͷ૬ஊΛड͚ɺ޿ౡϑϩϯτΤϯυษڧձͷ࢞ຓษڧձͱ ͯ͠ʮ޿ౡϑϩϯτΤϯυษڧձʙσβΠϯ෦ʙʯΛ্ཱͪ͛·ͨ͠ɻ πʔϧͷ࢖͍ํ͔ΒจࣈαΠζ΍ߦؒ͸Ͳ͏΍ܾͬͯΊΔ͔ͳͲૉ๿ͳٙ໰ ·ͰɺࢀՃऀશһͰ৘ใΛڞ༗͠ɺ޿ౡͷwebσβΠϯͷϨϕϧΞοϓΛ໨ ࢦ͠·͢ɻ

Slide 5

Slide 5 text

޿ౡϑϩϯτΤϯυษڧձ ຖ݄ͷษڧձͱ͸ผʹɺFacebookάϧʔϓͰ৘ใަ׵΍ަྲྀΛߦͳͬͯ ͍·͢ɻ ·ͨɺ։࠵৘ใ͸webϖʔδͱFacebookϖʔδɺFacebookάϧʔϓɺ TwitterΛ௨ͯ͡ൃ৴͍ͯ͠·͢ɻ ৄࡉ͸ΠϕϯτϖʔδΛ͝ཡ͍ͩ͘͞ https://hirofuro.org/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

A ͯ͠·͢

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Ϗϧυπʔϧͷมભ

Slide 12

Slide 12 text

Ϗϧυπʔϧͷมભ

Slide 13

Slide 13 text

Q ͳΜͰgulp΍Ίͨͷʁ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Q ͳΜͰLaravel Mixʹͨ͠ͷʁ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve('dist'), filename: 'my-first-webpack.bundle.js' } }; XFCQBDLDPOpHKT

Slide 22

Slide 22 text

Q webpackͰ͍͍͡Όͳ͍ͷʁ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Laravel mixͷಋೖ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Q Laravel࢖Θͳ͍࣌΋ Πϯετʔϧ͠ͳ͍ͱ͍͚ͳ͍ͷʁ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Laravel Mixʹඞཁͳ΋ͷ MT BQQ   OPEF@NPEVMFT  SPVUFT BSUJTBO   QBDLBHFMPDLKTPO TFSWFSQIQ CPPUTUSBQ  QBDLBHFKTPO  TUPSBHF DPNQPTFSKTPO QIQVOJUYNM  UFTUT DPNQPTFSMPDL QVCMJD  WFOEPS DPOpH  SFBENFNE  XFCQBDLNJYKT EBUBCBTF SFTPVSDFT

Slide 32

Slide 32 text

A ඞཁͳͷ͸ package.jsonͱwebpack.mix.js͚ͩ

Slide 33

Slide 33 text

{ "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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ϋϯζΦϯ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

var Vue = require('vue') var app = new Vue({ el: '#app', data: { message: 'Hello Laravel Vue!' } }) WVFBQQKT

Slide 43

Slide 43 text

{{ message }}
JOEFYIUNM

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

{ "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

Slide 46

Slide 46 text

A Laravel͸Vue.jsਪ͠Β͍͠

Slide 47

Slide 47 text

Q ReactͰॻ͖͍ͨ

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

ιʔεϚοϓͷಋೖ NJYTPVSDF.BQT ιʔεϚοϓΛCSSͱJavaScriptʹදࣔ͠·͢ CSSͷιʔεϚοϓʹόά͕͋Γɺ௥ه͕ඞཁ NJYXFCQBDL$POpH \EFWUPPMJOMJOFTPVSDFNBQ^ 

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Q Browsersync͕࢖͍͍ͨ

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Q autoprefixer͕ͷઃఆ͕͍ͨ͠

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Q PostCSSͷϓϥάΠϯ CSS MQPacker͕࢖͍͍ͨ

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

͋Γ͕ͱ͏͍͟͝·ͨ͠