webpack5 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 Webpack을사용하기 위해서는 node.js에서 webpack 모듈을 다운 받아야 합니다. 이미 미리 다운을 받았기 때문에 바로 진행을 할 수 있습니다. 지금부터가 webpack을 사용해 알아보는 시간입니다. Webpack을사용하기 위해서 먼저 코드에서 index.html 파일에서 JS 코드들을 별도의 JS 파일로 분리해야 합니다. 기존 JS 코드 삭제 다음 경로에 파일 생성 /source/index.js import hello_wo.. 2020. 6. 10. Webpack - 사용 이전 개발 방식 다음 강의를 보고 실습한 게시물입니다. 웹팩 이전의 세계와 모듈 소개 - Webpack 강의소개 이 수업에서는 웹팩을 도입하기 이전의 개발환경을 소개해드립니다. 이후 수업에서 현재의 환경을 개선시켜 나갈 것입니다. 강의 opentutorials.org 해당 게시물에서 작업한 코드는 github에 있습니다. DogPawDev/webpack-example webpack 공부입니다. Contribute to DogPawDev/webpack-example development by creating an account on GitHub. github.com 실습을 진행하기에 앞서 Node.js를 설치하고 진행을 해야 합니다. Node.js Node.js® is a JavaScript runtime built on.. 2020. 6. 10. 이전 1 2 다음
