laradock에서 Laravel-Mix의 HMR (Hot Module Replacement)을 사용하는 경우 설정
업데이트하자마자 반영해주고 브라우저 리로드도 자동으로 해줍니다.
Laravel에서는 다음 명령으로 사용할 수 있습니다.
※js를 포함하는 부분에서 함수 mix()를 사용할 필요가 있습니다. (후술)
npm run hot
그러나 가상 환경에서 실행하는 경우 호스트 시스템 쪽 쓰기가 집중되지 않고 반영되지 않습니다.
그런 환경용이라고 생각합니다만
npm run watch-poll
같은 작업도 준비되어 있습니다. (내부적으로 webpack의 watch-poll 옵션 사용)
그러나 watch라면 HMR에 비하면 즉시 반영되는 느낌이 없습니다.
브라우저를 다시로드하면 빌드가 끝나지 않고 수정하기 전에 코드로 움직입니다.
그것을 깨닫지 않고 ...
그러나 최근 HMR의 경우에도 polling하는 방법을 알았으므로 설정 방법을 소개합니다.
이번 가상 환경은 docker-compose(laradock)를 사용합니다.
환경 준비
우선 보통으로 Laravel 프로젝트 작성
composer create-project --prefer-dist laravel/laravel hmr-laradock-example 5.5.*
cd hmr-laradock-example
Laradock 추가
git init
git submodule add https://github.com/Laradock/laradock.git
Laradock을 일일이 움직이기
처음에는 상당히 시간이 걸립니다.
cd laradock
cp env-example .env
docker-compose up -d nginx workspace
http://localhost/ 열면 일단 Laravel이 움직이고 있습니다.
Laradock의 workspace 다시 만들기
이대로 npm도 들어 있지 않기 때문에 workspace를 재작성한다
docker-compose down
.env를 다시 작성하여 Node.js 설치
laradock/.env- WORKSPACE_INSTALL_NODE=false
+ WORKSPACE_INSTALL_NODE=true
이대로 해도 좋지만 LTS 버전을 설치하고 싶기 때문에 아래도 수정
laradock/.env- WORKSPACE_NODE_VERSION=stable
+ WORKSPACE_NODE_VERSION=lts/*
※ 만약 특정 버전이 좋으면 버전 번호를 지정
- WORKSPACE_NODE_VERSION=stable
+ WORKSPACE_NODE_VERSION=v6.12.3
추가 구성 파일을 읽도록 수정
laradock/.env- COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml
+ COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml:../docker-compose.laradock.yml
HMR용 포트 할당 ※docker-compose.laradock.yml은 Laravel 프로젝트 루트에
docker-compose.laradock.ymlversion: "2"
services:
### Workspace Utilities Container ###########################
workspace:
ports:
- "8080:8080"
업 다시
cd laradock
# buildしてからでもOK
# docker-compose build workspace
docker-compose up -d nginx workspace
Laravel Mix 설정 수정
이것이 메인입니다.
webpack.mix.js 수정
포트는 docker-compose.laradock.yml에 지정된 포트
폴링 간격은 우선 2000ms에
webpack.mix.js+
+ mix.webpackConfig({
+ devServer: {
+ host: '0.0.0.0',
+ port: 8080
+ },
+ watchOptions: {
+ poll: 2000,
+ ignored: /node_modules/
+ }
+ });
workspace 컨테이너에서 HMR 실행
docker-compose exec --user=laradock workspace bash
# Windowsの場合はwinptyというのを使う必要があるらしい
# winpty docker-compose exec --user=laradock workspace bash
npm install
npm run hot
이것으로 설정이 완료됩니다.
하려고
톱 페이지에서 사용해보십시오.
Laravel 프로젝트 생성 시 작성된 ExampleComponent를 사용합니다.
※js 파일을 지정할 때 사용하는 함수는 asset() 가 아니라 mix() 입니다.
resources/views/welcome.blade.php <body>
+ <div id="app" class="flex-center position-ref full-height">
+ <example-component></example-component>
+ </div>
+ <script src="{{ mix('js/app.js') }}"></script>
http://localhost을 열면 resources/assets/js/components/ExampleComponent.vue의 내용이 표시됩니다.
resources/assets/js/components/ExampleComponent.vue
곧 반영됩니다!
composer create-project --prefer-dist laravel/laravel hmr-laradock-example 5.5.*
cd hmr-laradock-example
git init
git submodule add https://github.com/Laradock/laradock.git
cd laradock
cp env-example .env
docker-compose up -d nginx workspace
docker-compose down
- WORKSPACE_INSTALL_NODE=false
+ WORKSPACE_INSTALL_NODE=true
- WORKSPACE_NODE_VERSION=stable
+ WORKSPACE_NODE_VERSION=lts/*
- WORKSPACE_NODE_VERSION=stable
+ WORKSPACE_NODE_VERSION=v6.12.3
- COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml
+ COMPOSE_FILE=docker-compose.yml:docker-compose.dev.yml:../docker-compose.laradock.yml
version: "2"
services:
### Workspace Utilities Container ###########################
workspace:
ports:
- "8080:8080"
cd laradock
# buildしてからでもOK
# docker-compose build workspace
docker-compose up -d nginx workspace
이것이 메인입니다.
webpack.mix.js 수정
포트는 docker-compose.laradock.yml에 지정된 포트
폴링 간격은 우선 2000ms에
webpack.mix.js
+
+ mix.webpackConfig({
+ devServer: {
+ host: '0.0.0.0',
+ port: 8080
+ },
+ watchOptions: {
+ poll: 2000,
+ ignored: /node_modules/
+ }
+ });
workspace 컨테이너에서 HMR 실행
docker-compose exec --user=laradock workspace bash
# Windowsの場合はwinptyというのを使う必要があるらしい
# winpty docker-compose exec --user=laradock workspace bash
npm install
npm run hot
이것으로 설정이 완료됩니다.
하려고
톱 페이지에서 사용해보십시오.
Laravel 프로젝트 생성 시 작성된 ExampleComponent를 사용합니다.
※js 파일을 지정할 때 사용하는 함수는 asset() 가 아니라 mix() 입니다.
resources/views/welcome.blade.php <body>
+ <div id="app" class="flex-center position-ref full-height">
+ <example-component></example-component>
+ </div>
+ <script src="{{ mix('js/app.js') }}"></script>
http://localhost을 열면 resources/assets/js/components/ExampleComponent.vue의 내용이 표시됩니다.
resources/assets/js/components/ExampleComponent.vue
곧 반영됩니다!
<body>
+ <div id="app" class="flex-center position-ref full-height">
+ <example-component></example-component>
+ </div>
+ <script src="{{ mix('js/app.js') }}"></script>
출처
참조 링크
Reference
이 문제에 관하여(laradock에서 Laravel-Mix의 HMR (Hot Module Replacement)을 사용하는 경우 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/boushi-bird@github/items/030a1e57c8cec7ed3a64텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
