react_웹 팩(webpack) 사용하여 번들링하기(번들링 과정 및 명령어)

번들링과 웹 팩에 대해서 공부 해본 뒤 실제로 웹팩을 사용해서 번들링 해보았다.
실습 환경은 React였고 전에 만들어 둔 실습 파일에 적용해 봤다.
번들링과 웹 팩에 대한 이론적인 부분이나 webpack.config.js 설정에 대한 개념 학습은 아래 포스팅에 작성해뒀다.

 번들링과 웹 팩 (webpack)

 

먼저 번들링을 하고자 하는 폴더 안에 들어가서 아래와 같이 코드를 작성한다.

npm init -y

npm init(initializer : 설정하다)는 package.json을 만들기 위해 사용하는 명령어로 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하기 위해 사용하는 명령어이다.
여기에 y옵션은 yes를 뜻하고, default값으로 설정된 package.json을 만들겠다는 의미로 쓰인다.

init을 완료하면 아래와 같은 내용이 포함된 package.json 파일이 생성된다.

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": ""
}

---

이제 아래 코드를 입력해 webpack을 설치하는 단계를 거친다.

npm install -D webpack webpack-cli

웹팩을 사용하기 위해 설치하는 것으로 실제 프로젝트에 사용하지 않기 때문에
-D(devDependency) : 실제 배포단계에 포함되지 않고 로컬 개발환경에서만 필요한 모듈들만 설치함)옵션을 설정한다.

---

설치까지 완료하면 최근 webpack은 설정파일 없이도 작동할 수 있게 되었지만 loader등을 사용하기 위해서는 설정파일을 작성해야 한다.
webpack.config.js 파일을 하나 만들고 그 안에 설정할 것들을 기입하면 된다.

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
  ],
  module: {
    rules: [{
        test: /.jsx?/,
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
        },
    },
    {
      test: /.css$/,
      use: ["style-loader", "css-loader"],
      exclude: /node_modules/,
    },
  ],
},
}

내가 설정했던 내용들은 이렇다.
대부분의 내용에 대한 부분은 번들링과 웹 팩 (webpack)포스팅에 나와있다.

추가로 여기서 JS와 React에서의 차이가 나오는데, webpack이 해석할 수 있는 것이 js와 json뿐이기 때문에 js로 구성된 파일에서 번들링을 할 때는 babel-loader를 설치해주지 않아도 되나, react로 구성된 파일에서 babel을 설치하지 않고 실행한다면 아래와 같은 오류메세지를 만날 수 있다.(JSX파일은 해석이 불가하기 때문)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
(이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다. 현재 로더가 처리하도록 구성되어 있지 않습니다.)

번들을 설치하기 위해서는 설정 파일에 위와 같이 (jsx부분) 입력해주고, 아래 코드를 이용해 설치까지 완료해 주면 된다.

 npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

---

HTML 파일이 있다면 HTML파일 또한 webpack이 읽어내지 못하기 때문에 html을 번들링하기 위해 필요한 plugin을 설치해준다.

npm i -D html-webpack-plugin

설치 후에 webpack.confih.js에 해당 플러그인을 적용시켜주는 과정도 잊으면 안된다.

---

이제 마지막 단계로 설정해준대로 번들링하는 과정만 남아있다.

npx webpack

을 터미널에서 실행시킨다면 아래와 같이 번들링이 완료된 파일이 만들어진다.

npm start를 통해 서버를 활성화 시켜보면 번들링하기 전과 동일한 화면을 확인 할 수 있다.