[웹팩] 빌드하기

cra을 사용하지않고 react 프로젝트를 만들었다고 가정하고, 웹팩을 빌드해 봅시다. 

 

 

웹팩으로 정적인 빌드 프로세스를 만들려면 필요한 모듈을 설치해야 합니다. 

npm install --save-dev webpack webpack-cli

 

웹팩이 번들을 빌드할때, JSX를 순수 리액트 코드로 변환하라고 지정할 필요가 있습니다. webpack.config.js파일에 시작파일과 번들을 출력할 파일을 지정합니다. 웹팩은 이 위치에 패키징한 자바스크립트 팡리을 넣어줍니다. 

다음으로 필요한 바벨 의존관계를 설치합니다. 

npm install babel-loader @babel/core --save-dev

 

웹팩 설정 파일에서 module이라는 필드에 웹팩에서 사용할 여러 로더들에 대한 정보를 추가합니다. 

module: {
 rules : [{ test: /\.js$/,
                exclude: /(node_modules)/,
               use: {
                       loader: "babel-loader",
                       options: {
                          presets: ["@babel/preset-env", "@babel/preset-react"],
                },
  ],
} 

각 로더는 자바스크립트 객체입니다.

 

이시점에서 바벨을 실행할때 사용할 프리셋을 지정해야 합니다. preset을 지정하면 바벨에게 어떤 식으로 파일을 변환할지 알려주게 됩니다. 예를들어, 바벨에게 이 프로젝트에서 ESNext 구문을 보면 코드를 브라우저가 이해할수있는 구문으로 변환하고 계속 진행해줘 라고 요구할 수 있습니다. 먼저 프리셋을 설치합니다.

npm install @babel/preset-env @babel/preset-react --save-dev

 

프로젝트 root에 .babelrc 파일을 만듭니다. 

{ "presets": ["@babel/preset-env", "@babel/preset-react"]} 

 

이제 웹팩을 실행해 봅시다. 웹팩은 정적으로 실행됩니다. 앱을 서버에 배포하기 전에 번들을 만듭니다. 

npx webpack --mode development

웹팩 빌드의 대부분의 오류는 import가 잘못된 경우 발생합니다. import 경로와 파일 이름이 잘못되지 않았는지 확인합니다. 다시 확인 후 수정해서 빌드를 시도합니다. 

 

 

package.json파일에 npm 스크립트를 추가해서 웹팩을 간편하게 실행할 수 있습니다. 

"scripts" : {
    "build" : "webpack --mode prodction" 
}

npm run build 

 

번들 로딩하기

웹팩은 번들을 dist 폴더에 넣습니다. 이 폴더에는 웹 서버에서 번들을 실행할 때 필요한 파일들이 들어 있습니다. dist 내부에는 index.html 파일이 포함되야 합니다. index.html 파일이 있어야 리액트 컴포넌트를 마운트시킬 대상 div 를 찾을 수 있습니다. 

index.html 파일에는 번들을 로딩하기위한 script 태그도 들어있어야 합니다.