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
330
Laravel Mixではじめるwebpack
広島フロントエンド勉強会 Vol.24の発表資料
井上拓
February 16, 2019
Tweet
Share
More Decks by 井上拓
See All by 井上拓
これからはじめるGit
takanashi66
0
67
gulpやめてLaravel Mixはじめた話
takanashi66
1
130
LT-WordPressの開発をプラグインで管理する
takanashi66
0
220
広島フロントエンド勉強会 Vol.18 『gulpの基本とgulp4』
takanashi66
1
110
CSS Grid Layout Module
takanashi66
0
42
webサイトのiPhone X 対応
takanashi66
0
1.2k
web制作におけるGitフロー
takanashi66
0
350
広島フロントエンド勉強会 Vol.12 『CSS Grid Layout Module』
takanashi66
0
230
CSS Grid Layout Module
takanashi66
0
170
Other Decks in Programming
See All in Programming
Jetpack Composeでの画面遷移
iwata_n
0
170
What's new in Android development tools まとめ
mkeeda
0
330
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
320
即、New Relic / New Relic NOW!
uzulla
0
330
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
IE Graduation Certificate
jxck
6
4.8k
「混ぜるな危険」を推進する設計
minodriven
5
1.4k
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
190
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
kanamasa
2
1.2k
[DevTrends - Jun/2022] Arquitetura baseada em eventos
camilacampos
0
150
RFC 9111: HTTP Caching
jxck
0
160
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
Featured
See All Featured
KATA
mclloyd
7
8.7k
YesSQL, Process and Tooling at Scale
rocio
157
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Fireside Chat
paigeccino
12
1.3k
The Power of CSS Pseudo Elements
geoffreycrofte
47
3.9k
Bash Introduction
62gerente
597
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
The Invisible Side of Design
smashingmag
290
48k
Statistics for Hackers
jakevdp
781
210k
A Modern Web Designer's Workflow
chriscoyier
689
180k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠