FILife

윈도우10 2004 업데이트가와 함께 WSL도 업데이트가 되었다. 처음에는 /mnt/d/projects 디렉토리를 mount하여 document_root 로 사용했으나, 찾아보니 /mnt 내에 위치한 파일은 제 속도가 나오지 않는다고 한다. /home 안에 새로 디렉토리를 만들었는데, 탐색기에서 접근할 방법이 막막했다. \\wsl$ 경로로 접근하면 된다기에 해봤더니 권한 오류가 발생한다. 이 경우는 IDE를 통해 해결되었다. intellij 계열이나 VScode 가 WSL 경로를 지원한다는듯 하다. 이후에 생긴 문제는 browsersync 사용 시 브라우저에서 접속이 안되는 것이었다. npm run watch 커맨드를 실행하면 브라우저 탭은 새로 열리는데 접속이 불가했다. 자동생성되는 3000번 포트가 ..

파일이 변경되면 브라우저를 자동으로 새로고침 해 주는 Browser-Sync 라는게 있다고 한다. 찾아보니 로컬서버의 경우는 매우 쉽게 설정이 가능한듯 했다. 하지만 나는 원격 서버 유저... (로컬 네트워크 내에 가상머신을 몇개 만들어 사용) 뭔짓을 해도 새로고침이 되지 않기에, 구글신께 빌어 계시를 받았다. [Laravel-mix 의 경우] 기본적으로 Browser-Sync가 dependency에 포함되어 있다. webpack.mix.js 파일에 셋팅만 해주면 된다. 윈도우의 hosts 파일을 변경하여 가상 도메인으로 활용중이므로, proxy 설정을 포함 해 준다. mix.browserSync({ proxy: 'http://my-virtual-domain.com', files: [ './dist/**..

webpack을 3에서 4로 업데이트 했다. 같은 툴인데 뭐가 얼마나 다르겠나 하고 시작했다. 많이 달랐다. 이 쉐키들... 일단 가장 중요한 요소로, CommonsChunkPlugin 이 deprecated 되어 사용할 수 없게 되었다. 대신 config.optimization.splitChunks 를 사용해야 한다. 샘플만 보고 따라했더니, 기존에 common 으로 묶었던 공통 js가 vendor.js 와 common.js 로 분리되었다. 게다가 css도 단일 파일로 만들던것이 직접 만든 css 파일들이 포함되지 않게 되어버렸다. 구글을 하루 종일 뒤진 끝에 분리 된 파일들을 병합할 수 있었다. 추가/변경 된 부분만 나열하자면 이렇다. (기존 entry 등은 대부분 동일하다) mode: "none",..

이런게 있다는걸 이제야 알았다. 심지어 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:~/.confi..

blueimp-fileupload 플러그인이 webpack과 의존성 충돌이 발생하여 이것과 jquery, jquery-ui 등을 별도로 사용했었다. 오랜만에 생각이 나 구글을 다시 뒤져보니 해법이 있었다. 1. script-loader 설치 > npm install --save-dev script-loader 2. 기존 페이지 내의 태그를 제거하고, 해당 플러그인이 사용되는 js에 다음과 같이 import 시킨다. require('script-loader!blueimp-file-upload/js/vendor/jquery.ui.widget.js'); require('script-loader!blueimp-tmpl/js/tmpl.js'); require('script-loader!blueimp-load-im..