김데브-프로그래밍9 --watch 옵션, npm 패키지 사용 계속 환경설정이 바뀔 때마다계속 npx webpack을 하는것이 귀찮기 때문에 npx webpack --watch 명령어를 사용하면 Source 폴더에서 변형이 일어날 경우 자동으로 컴파일을 실행시켜주는 명령어 입니다. 해당 명령어를 실행하고 아무 파일이나수정을 하고 저장을 하면바로 반영이 됩니다. Webpack 모듈이 사용할 모듈을 저렇게 적어놓으면 자동으로 node_modules에서 같은 이름의 모듈을 찾아서 자동으로 임포트 시켜줍니다. node.js 언어 자체에서 자동으로 node_modules 디렉토리에서 import 를 시켜주는 것이 아니라 webpack 모듈이 하는 것 입니다. temp 라는 이름의 모듈이 존재한다고 가정을 해봅니다. npm temp 라는 명령어를 통해 모듈을 다운을 받게되면 .. 2020. 6. 10. Webpack의 플러그인의 도입 포스트의 코드입니다. DogPawDev/webpack-example webpack 공부입니다. Contribute to DogPawDev/webpack-example development by creating an account on GitHub. github.com 웹팩에는 두가지 형태의 확장기능이 있습니다. 로더 최종적인 아웃풋( npx webpack 명령어로 나오는 index_bundle.js) 으로 가는 과정에 사용되는 기능 플러그인 만들어진 최종적인 결과물을 변형하는 기능 (해당 포스트에서 사용하는 플러그인은 index_bundle.js를 index.html 코드안에 넣어줍니다. ) 플러그인이 조금 더 자유로운 일들을 할 수 있습니다. 로더는 어떤 모듈을 처리하고 또다른 로더에게 넘기고 넘기고 .. 2020. 6. 10. Webpack의 output 포스트의 코드입니다. DogPawDev/webpack-example webpack 공부입니다. Contribute to DogPawDev/webpack-example development by creating an account on GitHub. github.com 어떻게 최종적인 결과를 원하는대로 만들 것인가 알아보는 시간입니다. 최종적인 파일의 이름, 하나로 뭉칠건지 특정 파일은 나눌 것인지를 설정 할 수 있습니다. 또 하나의 페이지를 만들어서 진행해 봅시다. /about.html 파일을 만들고 다음과 같이 작성해 줍니다. About.html은 about_bundle.js를 참고하도록 합니다. 기존 index.html 파일도 태그를 추가해 서로 이동할 수 있도록 만들어 줍니다. about.html .. 2020. 6. 10. Webpack의 로더 해당 포스트의 코드입니다. 로더 사용 전 DogPawDev/webpack-example webpack 공부입니다. Contribute to DogPawDev/webpack-example development by creating an account on GitHub. github.com 로더 사용 후 DogPawDev/webpack-example webpack 공부입니다. Contribute to DogPawDev/webpack-example development by creating an account on GitHub. github.com Webpack의 로더의 도입은 가장 중요한 내용입니다. 진행해보며 알아봅시당 우선 Index.html에 css 파일을 넣으려고 합니다. 그렇게 하기 위해선 최종적인.. 2020. 6. 10. 이전 1 2 3 다음
