Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Laravel Mixではじめるwebpack
井上拓
February 16, 2019
Programming
0
250
Laravel Mixではじめるwebpack
広島フロントエンド勉強会 Vol.24の発表資料
井上拓
February 16, 2019
Tweet
Share
More Decks by 井上拓
See All by 井上拓
takanashi66
1
120
takanashi66
0
150
takanashi66
1
93
takanashi66
0
38
takanashi66
0
840
takanashi66
0
320
takanashi66
0
230
takanashi66
0
160
takanashi66
1
220
Other Decks in Programming
See All in Programming
cwozaki
1
1.9k
shigeruoda
0
480
bkuhlmann
4
620
zsmb
1
130
zsmb
2
110
hirotokirimaru
1
430
mraible
PRO
0
170
e10dokup
0
450
yumcyawiz
4
640
ogidow
0
140
standfm
0
220
line_developers_tw
0
1.3k
Featured
See All Featured
destraynor
223
47k
chriscoyier
780
240k
sstephenson
144
12k
mthomps
39
2.3k
dotmariusz
94
5.1k
eileencodes
113
25k
shpigford
368
42k
denniskardys
220
120k
morganepeng
17
1.1k
sugarenia
233
840k
lemiorhan
626
42k
chriscoyier
145
19k
Transcript
201 ౡϑϩϯτΤϯυษڧձ Vol.24 Laravel MixͰ͡ΊΔwebpack
ౡϑϩϯτΤϯυษڧձ
ౡϑϩϯτΤϯυษڧձ • 20169݄9ʹൃ • ࠓճͰ24ճ • ͍͍݄ͩͨ1ճ։࠵ ౡϑϩϯτΤϯυษڧձౡͰ׆ಈ͢ΔϑϩϯτΤϯυΤϯδχΞ ͷΈΛղܾ͢Δू·ΓͰ͢ɻ ຖ݄ςʔϚʹԊͬͯɺϑϩϯτΤϯυͷٙΈΛղܾ͠·͠ΐ͏ɻ
ڞʹٙΈͷղܾɺ৽ͨͳٕज़ͷशಘΛ௨ͯ͠ౡͷweb੍࡞ͷϨ ϕϧΞοϓΛࢦ͠·͢ɻ
ౡϑϩϯτΤϯυษڧձ σβΠϯ෦ • 20174݄1ʹൃ • 10ճ։࠵ • ͍͍ͩͨ2ϱ݄ʹ1ճ։࠵ ౡͰwebσβΠϯΛओ࣠ʹͨ͠ษڧձ͕গͳ͘ɺใڞ༗Ͱ͖Δίϛϡχ ςΟʔগͳ͍ͱͷ૬ஊΛड͚ɺౡϑϩϯτΤϯυษڧձͷ࢞ຓษڧձͱ
ͯ͠ʮౡϑϩϯτΤϯυษڧձʙσβΠϯ෦ʙʯΛ্ཱͪ͛·ͨ͠ɻ πʔϧͷ͍ํ͔ΒจࣈαΠζߦؒͲ͏ܾͬͯΊΔ͔ͳͲૉͳٙ ·ͰɺࢀՃऀશһͰใΛڞ༗͠ɺౡͷwebσβΠϯͷϨϕϧΞοϓΛ ࢦ͠·͢ɻ
ౡϑϩϯτΤϯυษڧձ ຖ݄ͷษڧձͱผʹɺFacebookάϧʔϓͰใަަྲྀΛߦͳͬͯ ͍·͢ɻ ·ͨɺ։࠵ใwebϖʔδͱFacebookϖʔδɺFacebookάϧʔϓɺ TwitterΛ௨ͯ͡ൃ৴͍ͯ͠·͢ɻ ৄࡉΠϕϯτϖʔδΛ͝ཡ͍ͩ͘͞ https://hirofuro.org/
ҙࣄ߲ ౡϑϩϯτΤϯυษڧձϘϥϯςΟΞϕʔεͰ։࠵͓ͯ͠Γɺࣝ ͷγΣΞɾॿ͚߹͍ͰΓཱͬͯ·͢ͷͰɺ͝ࢀՃͷࡍ͝ཧղɾ͝ڠ ྗ͓ئ͍͍ͨ͠·͢ɻ
201 ౡϑϩϯτΤϯυษڧձ Vol.24 Laravel MixͰ͡ΊΔwebpack
Q ·ͩϏϧυπʔϧͰ ফͯ͠Δͷʁ
A ͯ͠·͢
Q Ϗϧυπʔϧͳʹͬͯ·͔͢ʁ
Ϗϧυπʔϧͷมભ
Ϗϧυπʔϧͷมભ
Q ͳΜͰgulpΊͨͷʁ
A ܧ͗͠ܧ͗͠ͰൿͷλϨΈ͍ͨʹͳ͔ͬͨΒ ࣮ΘΕͯͳ͍λεΫҰॹʹಈ͍ͯΔ
Q ͳΜͰLaravel Mixʹͨ͠ͷʁ
A ϝΠϯͷϑϨʔϜϫʔΫ͕ FuelPHP͔ΒLaravelʹ มΘ͔ͬͨΒ
Laravelͱʁ 20116݄ʹϦϦʔε͞ΕͨɺΦʔϓϯιʔεͷPHPϑϨʔϜϫʔΫɻ ιʔείʔυGitHubʹϗεςΟϯά͞Ε͍ͯͯɺGitHubͰͷελʔ ֫ಘ͕PHPϑϨʔϜϫʔΫͷதͰ࠷ଟ͍ɻ Laravelͷ໊લʰφϧχΞࠃޠʱʹొ͢ΔφϧχΞࠃͷԦɺέ ΞɾύϥϕϧʹͪͳΉͦ͏ɻ
Laravel Mixͱʁ Laravelʹόϯυϧ͞Ε͍ͯΔɺϑϩϯτΤϯυϏϧυπʔϧɻ -BSBWFM.JYQSPWJEFTBqVFOU"1*GPSEFpOJOH8FCQBDLCVJMETUFQTGPSZPVS-BSBWFM BQQMJDBUJPOVTJOHTFWFSBMDPNNPO$44BOE+BWB4DSJQUQSFQSPDFTTPST IUUQTMBSBWFMDPNEPDTNJYJOUSPEVDUJPO Laravel Mixଟ͘ͷҰൠతͳCSSͱJavaScriptͷϓϦϓϩηοαΛ༻ ͠ɺLaravelΞϓϦέʔγϣϯͨΊʹɺWebpackͰͷϏϧυΛ؆୯ʹఆ ٛͰ͖ΔAPIΛఏڙ͍ͯ͠·͢ɻ
None
webpackͱʁ ؆୯͍ݴ͏ͱෳͷϑΝΠϧΛ̍ͭʹ·ͱΊͯ͘ΕΔɺϞδϡʔϧόϯ υϥɻ ґଘؔΛཧͯ͘͠ΕΔͷͱͯେ͖͍ ओʹJavaScriptͷϑΝΠϧΛ·ͱΊΔͷʹΘΕ·͢ɻ gulpͷΑ͏ʹϓϥάΠϯͱΈ߹ΘͤΔ͜ͱͰɺJSͷτϥϯεϨΠτ SassͷίϯύΠϧͳͲϏϧυπʔϧͱͯ͑͠Δ
module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve('dist'), filename:
'my-first-webpack.bundle.js' } }; XFCQBDLDPOpHKT
Q webpackͰ͍͍͡Όͳ͍ͷʁ
A ʮεϥεϥͱఆٛͰ͖Δʯ͕ϛι
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
Laravel mixͷಋೖ
Laravelͷಋೖ CSFXJOTUBMMDPNQPTFS DPNQPTFSDSFBUFQSPKFDUQSFGFSEJTUMBSBWFMMBSBWFM<QSPKFDUOBNF> LaravelύοέʔδཧʹcomposerΛ͏ͷͰΠϯετʔϧ composerΛ͍ɺLaravelΛΠϯετʔϧ͢Δ
Laravel Mixͷಋೖ npmύοέʔδΛΠϯετʔϧ OQNJOTUBMM OQNSVOXBUDI ରϑΝΠϧΛࢹ͠มߋ͕͋Εมߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ Node.jsͷΠϯετʔϧ (10.15.1 LTS) https://nodejs.org/ja/
ऴྃctrl+c
Q LaravelΘͳ͍࣌ Πϯετʔϧ͠ͳ͍ͱ͍͚ͳ͍ͷʁ
A ͪΖΜLaravel Mix୯ମͰಈ࡞͠·͢
https://github.com/JeffreyWay/laravel-mix GitHub͔ΒμϯϩʔυͰ͖·͢ɻ
Laravel Mixʹඞཁͳͷ MT BQQ OPEF@NPEVMFT SPVUFT BSUJTBO
QBDLBHFMPDLKTPO TFSWFSQIQ CPPUTUSBQ QBDLBHFKTPO TUPSBHF DPNQPTFSKTPO QIQVOJUYNM UFTUT DPNQPTFSMPDL QVCMJD WFOEPS DPOpH SFBENFNE XFCQBDLNJYKT EBUBCBTF SFTPVSDFT
A ඞཁͳͷ package.jsonͱwebpack.mix.js͚ͩ
{ "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
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
Laravel Mixͷಋೖ OQNJOTUBMM OQNSVOXBUDI package.jsonͱwebpack.mix.jsΛ࣋ͬͯ͘Δ͚ͩͰ͙͢ʹ࢝ΊΒΕ· ͢ɻ
ϋϯζΦϯ
https://github.com/takanashi66/hirofuro24 GitHub͔Βμϯϩʔυ͍ͯͩ͘͠͞ɻ σϞ༻ϦϙδτϦ
Laravel Mixͷಋೖ npmύοέʔδΛΠϯετʔϧ OQNJOTUBMM OQNSVOXBUDI ରϑΝΠϧΛࢹ͠มߋ͕͋Εมߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ Node.jsͷΠϯετʔϧ (10.15.1 LTS) https://nodejs.org/ja/
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
Q ͜Ε͚ͩ͡ΌΓͳ͍ JavaScriptVue.jsͰॻ͖͍ͨ
A webpack.mix.jsʹه͠·͠ΐ͏
var Vue = require('vue') var app = new Vue({ el:
'#app', data: { message: 'Hello Laravel Vue!' } }) WVFBQQKT
<div class="main"> <div id="app"> {{ message }} </div> </div> JOEFYIUNM
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
{ "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
A LaravelVue.jsਪ͠Β͍͠
Q ReactͰॻ͖͍ͨ
A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹه͠·͠ΐ͏
Browsersyncͷಋೖ OQNJOTUBMM%SFBDUSFBDUEPN Reactຊମͱɺreact-domΛΠϯετʔϧ͠·͢ɻ
const mix = require('laravel-mix'); mix.react('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT
Q ιʔεϚοϓ͕͍͍ͨ
A ؆୯ʹͰ͖·͢ ʢόά͋Γʣ
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
None
None
ιʔεϚοϓͷಋೖ NJYTPVSDF.BQT ιʔεϚοϓΛCSSͱJavaScriptʹදࣔ͠·͢ CSSͷιʔεϚοϓʹόά͕͋Γɺه͕ඞཁ NJYXFCQBDL$POpH \EFWUPPMJOMJOFTPVSDFNBQ^
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
None
None
Q Browsersync͕͍͍ͨ
A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹه͠·͠ΐ͏
Browsersyncͷಋೖ OQNJOTUBMM%CSPXTFSTZODCSPXTFSTZODXFCQBDLQMVHJO BroesersyncຊମͱɺWebpack༻ͷϓϥάΠϯΛΠϯετʔϧ͠·͢ɻ
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
Q autoprefixer͕ͷઃఆ͕͍ͨ͠
A webpack.mix.jsʹ ΦϓγϣϯΛه͠·͠ΐ͏
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
Q PostCSSͷϓϥάΠϯ CSS MQPacker͕͍͍ͨ
A webpack.mix.jsʹ ΦϓγϣϯΛه͠·͠ΐ͏
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
͋Γ͕ͱ͏͍͟͝·ͨ͠