CRA 없이 React 앱 설치 - #3_Webpack

• 필요한 터미널(terminal) 명령어
  • pwd : 현재 작업 위치
  • ls : 현재 위치 안의 파일 출력
  • cd : 작업 디렉토리를 바꾸는 명령어
  • mkdir : 디렉토리(폴더)를 생성

---

React 앱을 만들기 위해 필수적인 개발 도구들

Babel, Webpack, HWR(hot-module-replacement) 등

• Webpack
  • Webpack은 번들러다.
  • 분리된 Javascript와 css 모듈 코드를 브라우저에 최적화된 여러개의 파일로 결합

---

Webpack

Step.01 Webpack 사용 시 필요한 패키지 설치

터미널에서 작업 디렉토리에 npm i -D webpack webpack-cli html-webpack-plugin babel-loader 입력한다.

• webpack : webpack을 사용하기 위해 필수적으로 필요함
• webpack-cli : 터미널에서 명령을 통해 webpack을 적용 시킬 수 있도록 함
• html-webpack-plugin : 번들링 된 파일을 html에 적용하여 최종 html 생성
• babel-loader : webpack에서 번들링 할 때에 babel 실행

PS C:\WEB\front-end\React\'새로운폴더'> npm i -D webpack webpack-cli html-webpack-plugin babel-loader

package.json 파일을 열면 devDependencies에 잘 설치되어있다.
* -D 옵션을 주면 dependencies가 아닌 devDependencies에 추가된다.

"devDependencies": {
    "babel-loader": "^8.2.5",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
}

Step.02 Webpack 사용

1. package.json있는 곳에 webpack.config.js 파일을 생성한다.

2. webpack.config.js 페이지로 가서 javascript 코드를 복사하여 webpack.config.js 파일에 넣은 후 사용에 맞게 entry, output 등을 수정한다.

// Example code

const path = require('path'); // node module 중 path를 가져와서 파일들을 잘 읽을 수 있도록 처리
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	mode: 'development',
	entry: './src/index.js',	// 시작 지점인 파일

	module: {					// 번들링을 하며 적용되는 설정
		rules: [{				// loader설정, parser설정 등
			test: /\.js$/,		// 모든 js
			use: 'babel-loader'	// babel.config.js와 연동
		}]
	},

	plugins: [
		new HtmlWebpackPlugin({
			template: './public/index.html'	// 번들링 된 파일이 적용 될 html
		})
	],

	optimization: { minimizer: [] },	// webpack 압축 기능 끔

	output: {									// 번들링한 파일 위치
		path: path.resolve(__dirname, 'dist'),	// dist 라는 폴더가 생성되며 그 안에 파일이 생성됨
		filename: "bundle.js"					// 번들링한 파일명
	},
};

3. 설정을 해놓으면 터미널에 npx webpack 입력했을 때
   
   dist 폴더,bundle.js, index.html 이 생성된 것을 볼 수 있다.