[Webpack] webpack 설치와 실행

고병표·2022년 4월 24일
0

Webpack

목록 보기
4/5
post-thumbnail

Step1. 빈폴더 부터 만들기 시작

1. 빈폴더 만들기

mkdir react-webpack
cd react-webpack

2. 그리고 application의 시작점(entry point)인 자바스크립트 파일 하나는 생성해줘야 합니다.

mkdir src
touch src/index.js
  • 익숙한 create react app의 구조를 따라하겠습니다. src 폴더 밑에 이 프로젝트의 가장 시작점! index.js 파일을 만들어줍니다.

3. package.json 파일도 초기화

npm init

Step2. webpack 설치와 설정파일

1. 웹팩, 바벨 둘 다 배웠으니까 처음에 필수로 필요한 모듈 한꺼번에 설치!

yarn add webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react -D
yarn add react react-dom

2. babel도 세팅을 해줘야 하는데 좀 이따 하기로 하고, 일단 webpack 설정 파일부터 생성합니다. 이 프로젝트의 root 경로에 만드시면 됩니다.

// 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;

entry와 output

💡 실무에서 하는 프로젝트에 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 폴더 밑에 생기기 때문에 그대로 구조를 따라하겠습니다.

webpack 실행하기

1. 이제 설정이 잘 되었는지 실행해볼까요? webpack 명령어를 사용해서 실행해야 하므로 package.json 의 script에 webpack 을 추가해보겠습니다.

    {
      "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

3. build 폴더 밑에 bundle.js 파일이 생겼나요? 그러면 성공. good 👍🏼

0개의 댓글