npm을 통해 가져온 라이브러리를 프로젝트에 포함시킬때 웹팩을 사용하는 방법 lodash라는 패키지를 어떻게 프로젝트에 삽입할까? index.js에서 import한다. ✨참고 https://www.npmjs.com/

소스파일의 변경을 감지하고 자동으로 컴파일함

웹팩에는 두 가지 형태의 확장기능이 있다. 1) loader : 가지고 있는 asset을 최종 output으로 만드는 과정에서 사용됨 2) plugin : 최종 결과물을 변환한다. loader보다 더 복합적이며, 더 자유로운 일을 많이 할 수 있다. 플러그인은 플러그인마다 사용방법이 제각각 다르다. 예제로 사용할 플러그인은 HtmlWebpackPlugin Installation 사용하기 webpack.config.js ✨참고 1) https://webpack.kr/plugins/ 2) https://webpack.kr/plugins/html-webpack-plugin 3) https://github.com/jantimon/html-webpack-plugin 4) https://www.youtube.com/watch?v=FlpRJ9iXYZg&lis

최종 결과를 어떻게 원하는데로 출력할 것인가. webpack.config.js 번들링할 파일을 명시한다. 결과파일의 이름을 지정한다. ✨참고 1) https://webpack.kr/configuration/output/ 2) https://www.youtube.com/watch?v=dt2xU71pX88&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA&index=7

로더는 웹팩의 핵심이라고 할 수 있음 HTML에 CSS를 link로 연결했을때, 다운로드 되는 파일은 style.css와 index_bundle.js 총 2가지이다. js처럼 css도 번들링 할 수 없을까? loader 입력한 asset(css, jpg...)들을 가공되어 원하는 output을 출력하는 일종의 가공공정 뒤쪽에 있는 로더가 먼저 실행됨, 위의 코드에서는 'css-loader'가 먼저 실행되는데, 이를 체이닝이라고 함 CSS를 번들링하기위해 필요한 loader를 설치한다. install css-loader 'css-loader'는 css파일을 읽어서 웹팩으로 가져오는 역할 webpack.config.js에 아래를 추가한다. 위와 같이 입력시, css

웹팩의 기본값 1) 개발자 모드 2) 배포 모드 3) 아무것도 세팅되지 않은 모드 > "production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄임 모드를 이용하는 첫번째 방법 보통 webpack.config.js와 webpack.config.prod.js 두 개의 파일을 만들어서 개발시에는 npx webpack으로 개발모드를 실행하고, 배포시에는 npx webpack --config webpack.config.js 로 배포모드를 실행한다. webpack.config.js webpack.config.prod.js 모드를 이용하는 두번째 방법 하나의 파일을 만들고 시스템의 환경변수 세팅에 따라 조건문을 이용해 적당한 모드로 스위칭되도록한다. ✨ 참고 1) https://webpack.js.org/configuration/mode/ 2) https://yamoo9.gitbook.io/

INPUT -> PROCESS -> OUTPUT 웹팩을 공부할 때 따져봐야 할 부분 1) 어떻게 다양한 형태의 자원들을 웹펙에게 던져줄 것인가? 2) 그것들을 어떤 방법으로 가공할 것 인가? 3) 만들어진 결과를 개발하거나 배포하기 유리한 형태로 가공 webpack.config.js 파일을 만든다. 긴 명령어를 대체하기 위함 위 명령어와 아래의 webpack.config.js는 같은 동작을 한다. __dirname는 현재 파일이 위치하고 있는 경로를 알려주는 node.js의 변수 아래의 명령어로 웹팩이 webpack.config.js를 읽고 그 내용대로 행동함 웹팩을 사용하는 두 가지 방법 1) 커멘드 라인에서 명령어 행에서 옵션을 주는 방식으로 웹팩을 핸들링 2) config 파일에 웹팩에게 시키고 싶은것을 적어서 시키기 만약 파일의 이름을 webpack.config.js라는 약속된 이름으로 생성했다면 이렇게만 쳐도 웹팩이 webpack.config.js

웹팩을 도입했을 때 얻을 수 있는 효과 => 리팩토링 > 리팩토링이란? : 구동되는 방법은 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 행위 웹팩 설치하기 : 웹팩을 설치하기 위해서는 진행중인 프로젝트를 Node.js의 패키지 프로젝트로 만들 필요가 있다. 1) 현재 디렉토리를 Node.js의 프로젝트 폴더로 선언하기 2) 엔터를 치고 넘어가면 package.json이라는 파일이 생성된다. 3) 프로젝트 폴더에 웹팩 설치하기 : webpack과 webpack-cli, 두개의 패키지 설치 > -D 옵션 : 현재 프로젝트의 애플리케이션 자체를 위한 기능이아니라 개발을 하기 위한 기능들은 -D 옵션을 사용하여 설치한다. 4) "devDependencies" 라는 항목이 package.json에 추가되었다. 5) index.html의 js코드를 별도의 js파일로 빼내기 위해 index.js

index.js hello.js world.js 결과 모듈 개념 이해하기 index.js hello.js world.js 결과 ✨참고 유튜브 생활코딩 https://www.youtube.com/watch?v=cp_MeXO2fLg&list=PLuHgQVnccGMChcT9IKopFDoAIoTA-03DA