[javascript] 리액트 프레임워크에서 모듈 번들러를 사용하는 방법은 어떻게 되나요?

05 Dec 2023

javascript

먼저, 웹팩을 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 웹팩을 설치합니다:

npm install webpack webpack-cli --save-dev

웹팩을 설치한 후, 프로젝트의 루트 폴더에 webpack.config.js라는 이름의 파일을 생성합니다. 이 파일은 웹팩의 설정 파일로 사용될 것입니다.

다음은 webpack.config.js 파일에 작성할 내용입니다:

const path = require('path');

module.exports = {
  entry: './src/index.js', // 애플리케이션의 진입점
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들된 파일의 출력 경로
    filename: 'bundle.js' // 번들된 파일의 이름
  },
  module: {
    rules: [
      {
        test: /\.js$/, // .js 확장자를 가진 모든 파일에 대하여
        exclude: /node_modules/, // node_modules 폴더는 제외하고
        use: 'babel-loader' // babel-loader를 사용하여 자바스크립트 파일을 변환
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // 자바스크립트와 JSX 파일을 모듈로 사용할 수 있도록 확장자를 설정
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 개발 서버가 제공할 파일들의 경로
    port: 3000, // 개발 서버의 포트
    open: true // 개발 서버가 자동으로 브라우저를 열도록 설정
  }
};

위의 설정파일에서 주목할 점은 entry, output, module, resolve, devServer 등의 속성입니다. entry는 애플리케이션의 진입점을 지정하고, output는 번들된 파일의 경로와 이름을 지정합니다. module은 모듈 로딩에 대한 규칙을 지정하고, resolve는 자바스크립트 확장자를 설정합니다. devServer는 개발 서버를 설정하는 부분입니다.

설정이 완료되면, 터미널에서 다음 명령어를 실행하여 웹팩을 실행합니다:

npx webpack --mode development

위 명령어를 실행하면, src/index.js 파일과 해당 모듈들이 번들로 묶여 dist/bundle.js 파일이 생성됩니다. 또한 개발 서버가 dist 폴더를 기반으로 작동하며, 브라우저에서 http://localhost:3000으로 애플리케이션을 확인할 수 있습니다.

웹팩을 통해 리액트 애플리케이션을 번들링하는 방법에 대해 알아보았습니다. 웹팩을 사용하면 모듈 시스템을 활용하여 리액트 애플리케이션을 보다 효율적으로 구성할 수 있습니다.