Laravel-mix로 webpack 사용하기

이런게 있다는걸 이제야 알았다.

심지어 5.4 이전 버전에서도 exlixir 라는 이름으로 존재했었다고 한다.

애초에 composer require를 통해 laravel을 설치했으니 그럴만도 하다.

기존 프로젝트에 npm i -S laravel-mix 를 할수도 있지만, 그 부분은 알아서 응용하는걸로...

~ 우분투 18.04, node와 npm 설치 된 것으로 가정 ~

우선 OS에 laravel installer를 설치해준다.

composer require global "laravel/installer"

다음으로 laravel 커맨드를 실행하기 위해 installer 커맨드의 PATH를 잡아줘야 한다.

~/.bashrc 를 열어 아래와 같이 PATH를 추가 해 준다.

PATH=$PATH:~/.config/composer/vendor/bin

source 명령어로 추가한 PATH를 시스템에 적용해준다.

# source ~/.bashrc

이제 laravel 명령어를 사용할 수 있다.

프로젝트 디렉토리로 이동하여 새 laravel 프로젝트를 생성한다.

# laravel new my-project && cd my-project

프로젝트 루트를 확인 해 보면 package.json 파일이 포함되어 있다.

npm 패키지를 설치해준다.

# npm install

시험삼아 실행 해 본다.

# npm run dev

공식 메뉴얼에는 해당 내용이 없는데, 시험 실행 과정에서 babel latest preset 오류가 발생하는 경우가 있다.

.babelrc 파일을 생성하여 아래 내용을 넣어준다.

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

다시 실행 해 보면 아마도 잘 될것이다.

이후 webpack.mix.js 파일을 열어 컴파일 될 파일들을 설정 해 주면 된다.

js의 경우 node_modules의 모듈을 사용하려면 잘 알다시피 import나 require를 사용하면 되고,

node_modules의 css를 사용하려면 app.scss (webpack.mix.js에 기본으로 컴파일 하도록 포함되어 있음)에 @import로 로드하도록 해주면 된다.

참고1: https://laravel.kr/docs/5.5/mix

참고2: https://github.com/JeffreyWay/laravel-mix/issues/412#issuecomment-280683564

참고3: https://stackoverflow.com/a/46051515/4531618