라라벨 믹스 webpack.mix.js

1 개요

라라벨 webpack.mix.js

laravel/webpack.mix.js

기본(css)

// https://github.com/laravel/laravel/blob/969ff64e02b5ba316ebfe58aba76ca9ceac34542/webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

scss

// https://github.com/JeffreyWay/laravel-mix-example/blob/dfabaa62464bd88da4be8d7dd6060ffe006f460c/webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

less + tailwind

// https://github.com/JeffreyWay/laravel-mix-tailwind
const mix = require('laravel-mix');

require('laravel-mix-tailwind');

mix
    .js('resources/js/app.js', 'public/js')
    .less('resources/less/app.less', 'public/css')
    .tailwind();

vue

// https://laravel-mix.com/docs/6.0/vue
const mix = require('laravel-mix');

mix.js('src/app.js', 'public/js').vue();

scss + vue + tailwind

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .version();

2 같이 보기

• 라라벨 resources/assets/js/app.js
• 라라벨 resources/assets/sass/app.scss
• 라라벨 resources/views/welcome.blade.php
• 라라벨-믹스
• webpack.config.js

3 참고 자료

• https://github.com/JeffreyWay/laravel-mix-example/blob/master/webpack.mix.js