webpack bundler

Webpack Bundler

매우 꼼꼼한 구성으로, 중/대형 프로젝트에 적합합니다.

 

프로젝트 생성

1. terminal --> npm init -y 명령 실행
2. terminal --> npm i -D webpack webpack-cli webpack-dev-server@next 명령 실행
3. package.json 파일에 "scripts" 부분 기존 내용 지우고, "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" 작성
4. webpack.config.js 파일 새로 생성한 후, 필요한 옵션 작성
5. terminal --> npm run dev 명령 실행

webpack.config.js 파일은 꼼꼼하게 관리해주는 역할을 합니다.

parcel은 자동으로 다 해줌으로 신경 안 써도 됩니다.

 

entry, output

webpack은 dev를 run할때마다 번들링한 파일이 생깁니다.

그래서 output에 clean:true를 넣으면 전에 생성된 파일을 자동으로 지울 수 있습니다.

또한 output에 path는 절대경로입니다.

 

진입한 파일이 main.js으로 설정한 후, output에 path와 filename을 작성 안 하더라도,

자동으로 dist폴더에 main.js를 생성합니다.

 

webpack 문서 참조

 

plugins

dist폴더에 main.js에 index.html를 삽입해서 개발서버를 오픈할 수 있습니다.

npm i -D html-webpack-plugin 을 통해 패키지를 설치합니다.

webpack.config.js파일에서 const HtmlPlugin = require('html-webpack-plugin')를 선언한 후,

module.exports 안에 plugins 배열을 작성해줍니다.

 

정적 파일 연결

npm i -D copy-webpack-plugin 을 통해 패키지를 설치합니다.

webpack.config.js파일에서 const CopyPlugin= require('copy-webpack-plugin')를 선언한 후,

plugins 쪽에 위 부분을 추가합니다.

static폴더에 favicon을 넣고, 기타 이미지는 images 폴더 안에 저장합니다.

 

module - css 연결

여기서 index.html 파일에 css 연결할 때 경로를 주의하세요.

 

npm i -D css-loader style-loader 을 통해 패키지를 설치합니다.

webpack.config.js파일 module.exports 안에 module를 작성해줍니다.

 

SCSS

npm i -D sass-loader sass 을 통해 패키지를 설치합니다.

위에 css파일도 연결할 수 있겠금 정규표현식으로 test부분을 작성하고

sass-loader 패키지 추가합니다.

 

Autoprefixer(PostCSS)

npm i -D postcss autoprefixer postcss-loader 을 통해 패키지를 설치합니다.

webpack.config.js파일 module.exports에 module부분을 캡처처럼 작성합니다.

순서가 중요하니 순서대로 작성하세요.

package.json에 위 내용 추가합니다.

.postcssrc.js 파일을 생성해줍니다.

캡처처럼 작성합니다.

 

babel

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

을 통해 패키지를 설치합니다.

.babelrc.js 파일에 위 캡처처럼 추가합니다.

webpack.config.js파일 module.exports에 module부분을 캡처처럼 추가 작성합니다.

 

npm i -D babel-loader 을 통해 loader을 설치하면 babel구성 끝납니다.

 

NPX, Degit

degit는 손쉽게 git의 코드를 다운로드하는 겁니다.

일반적으로 degit을 먼저 설치해야만 사용가능하지만

npx degit 저장소 로컬저장폴더 명령을 통해 바로 사용할 수 있습니다.

 

git clone 명령어는 버전관리한 코드들을 다운로드하는 겁니다.

npx degit 방식은 처음부터 버전관리 시작할 수 있습니다.

npx degit는 github에 code 직접 다운로드하는 방식과 같습니다.