Laravel Mix

Webpack은 브라우저 용 JavaScript및 자산을 준비하는 매우 강력한 모듈 번들러입니다. 이해할 수 있는 유일한 단점은 약간의 학습 곡선이 필요하다는 것입니다. 웹팩 구성을 동적으로 구성하기위한 간단하고 유창한 API를 제공합니다. 

 

- laravel mix 설치

npm install laravel-mix --save-dev

- webpack.mix.js 설정

touch webpack.mix.js
// webpack.mix.js 생성


// webpack.mix.js 내 코드 추가
let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').setPublicPath('dist');

- laravel mix 컴파일 실행

npx mix // laravel mix compile
npx mix watch // laravel mix watch

Laravel Mix API는 기본적인 JavaScript 및 Sass 컴파일 이상의 기능을 제공합니다. CSS 자동 접두사, Vue 지원, 소스 맵 또는 Vendor추출이 필요한지 여부에 관계없이 Mix가 해결합니다. 

 

// 사용 예시
// Compile Modern JavaScript
mix.js('src/app.js', 'js');

// Compile Sass
mix.sass('src/app.scss', 'css');
// Compile JavaScript and Sass
mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css');
// Compile JavaScript and Set the Output Base Directory
mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css')
   .setPublicPath('dist');
// Compile CSS With PostCSS Plugins
mix.postCss('src/app.css', 'dist', [
    require('postcss-custom-properties')
]);
// Compile JavaScript With File Versioning
mix.js('src/app.js', 'js')
   .version();
// Once compiled, the hash can be retrieved from your mix-manifest.json file.

// Compile JavaScript With Support for Vue Single File Components
mix.js('src/app.js', 'js')
   .vue();
// Compile JavaScript and Set an Explicit Vue Version
mix.js('src/app.js', 'js')
   .vue({ version: 3 });
// Extract Vue Single File Component CSS to its Own File
mix.js('src/app.js', 'js')
   .vue({ extractStyles: true });
// Extract Vue Single File Component CSS to a named File
mix.js('src/app.js', 'js')
   .vue({ extractStyles: 'css/vue-styles.css' });
// Compile JavaScript With Support for React
mix.js('src/app.js', 'js')
   .react();
// Compile JavaScript and Extract Lodash to its Own File
mix.js('src/app.js', 'js')
   .extract(['lodash']);
// Compile JavaScript and Extract All Vendor Dependencies
mix.js('src/app.js', 'js')
   .extract();
// Enable Source Maps
mix.js('src/app.js', 'js')
   .sourceMaps();
// Make jQuery Available to Every Module
mix.js('src/app.js', 'js')
   .autoload({
       jquery: ['$', 'window.jQuery']
    });
// Trigger Browsersync Page Refreshes When in Watch Mode
mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css')
   .browserSync('http://your-app.test');
// Then run npx mix watch.

// Load an Environment File Key
// .env
MIX_SOME_KEY=yourpublickey
// Only keys in your .env file that begin with "MIX_" will be loaded.

// webpack.mix.js
mix.js('src/app.js', 'js')
// src/app.js
console.log(
    process.env.MIX_SOME_KEY
); // yourpublickey

 

# 참고자료

laravel-mix.com/docs/6.0/installation