반응형 Webpack4 [Webpack] config 파일(2) - loader, plugin 1. Loader webpack은 기본적으로 자바스크립트 모듈을 bundle 해주는데, Loader을 이용하면 다른 확장자 파일들도 같이 bundle 해줄 수 있다. 예를 들어 js, css를 bundle해보자. 다음 예제는 엔트리파일(index.js)과 css파일(reverse.css)을 같이 bundle하는 것이 목표이다. 다음 webpack문서를 보면 CSS파일을 로딩하는 방법을 알 수 있다. webpack.js.org/guides/asset-management/#loading-css Asset Management | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a bro.. 2021. 4. 19. [Webpack] config 파일(1) - entry, output, mode 1. 설정 파일 생성 및 entry, output 옵션 설정 이전 webpack 포스팅에서 다음 명령어로 bundle작업을 수행했다. npx webpack --entry [Entry file 경로] --output-path [bundle 파일을 생성할 경로] 이렇게 직접 입력해도 되지만, 위 명령이 너무 길어서 불편한 분들은 설정(config) 파일을 도입해보는 것도 괜찮다. Configuration파일 관련 내용은 아래 문서에서 확인할 수 있다. webpack.js.org/configuration/ Configuration | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a .. 2021. 4. 16. [Webpack] Webpack 사용법 이전 포스팅에 올렸던 순서도를 그대로 가져왔다. 이제 본격적으로 위의 절차를 그대로 따라 Bundle 파일을 생성하고, 이 Bundle 파일을 html의 script에 포함시켜서 웹사이트를 실행시켜볼 것이다. 1. 자바스크립트 파일 생성 [자바스크립트 파일들을 생성한 뒤, 각 파일마다 외부로 보낼 변수를 export default로 지정해주는 단계] p1.js let s = "원숭이 엉덩이는 빨개"; export default s; p2.js let s = "빨가면 사과"; export default s; p3.js let s = "사과는 맛있어"; export default s; 2. Entry 파일 생성 [자바스크립트 모듈들을 한 파일에 모으는 단계] index.js 모듈을 사용하여 p1.js, p2.. 2021. 4. 15. [Webpack] Webpack 소개 Webpack이란? 대표적인 자바스크립트 모듈 번들러 이번 포스팅에서는 모듈과 번들러의 개념을 이해하여, Webpack이 무엇인지 알아보는 시간을 가져볼 것이다. 1. 모듈 많은 자바스크립트 패키지를 사용하다보면, 파일간에 변수명이 겹치는 경우가 발생하여 어플리케이션이 의도와 다르게 동작할 수 있다. 이러한 문제는 모듈을 이용하여, 어느 변수가 어느 자바스크립트 파일에 있는 변수인지 구분하여 충돌을 방지할 수 있다. 모듈은 쉽게 말하자면 부품같은 개념이다. 그렇다면 다음 예제를 통해 모듈을 더 깊게 이해해보자. 모듈 사용 예 오른쪽 창의 helloworld.js을 보면, 외부에서 사용할 변수 a를 export default로 지정해준 모습이다. 그리고 이 값을 태그 내에서 받기 위해서는 type옵션을 반.. 2021. 4. 15. 이전 1 다음
