Archives
10-27 16:41
Today
7
Total
287,040
관리 메뉴

FILife

Laravel-mix로 webpack 사용하기 본문

내가 자꾸 까먹어서 쓰는 개발 이야기/Laravel

Laravel-mix로 webpack 사용하기

FIL 2018. 10. 2. 16:51

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


심지어 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

0 Comments
댓글쓰기 폼