mkdir react-webpack
cd react-webpack
mkdir src
touch src/index.js
npm init
yarn add webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react -D
yarn add react react-dom
// webpack.config.js
const path = require('path');
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
};
module.exports = config;
💡 실무에서 하는 프로젝트에 webpack을 사용하는 경우, 저 위의 짧은 설정 파일이 나중에는 여러 파일로 나뉘고, line 수도 많이 늘어날 것입니다. 더 복잡해지기 전에 가장 기초적이고 필수인 부분들을 앞으로 하나씩 설명해드리겠습니다.
// 설정 파일 일부
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
}
};
entry
: 이 프로젝트는 어느 파일에서 시작할지 webpack한테 알려줘야 합니다. entry 프로퍼티에 경로를 지정합니다.output
: webpack이 적용된 결과파일을 어느 위치에, 어떤 파일이름으로 생성할지 지정합니다. create react app도 build 후에 build 폴더 밑에 생기기 때문에 그대로 구조를 따라하겠습니다. {
"name": "react-webpack",
"version": "0.0.1",
"scripts": {
"build": "webpack"
},
"author": "wecode",
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
```
### 2. 그리고 build 명령어를 실해봅시다.
yarn build