18. Webpack과 프레임워크 통합 - 1

Webpack에서 React, Angular, Vue와의 통합

웹팩은 각종 프레임워크와의 통합을 지원하여, React, Angular, Vue와 같은 인기 있는 프론트엔드 프레임워크와 함께 사용될 수 있습니다. 이번 글에서는 각 프레임워크와의 통합 방법에 대해 알아보겠습니다.

1. React와 함께 사용하기

React는 JSX라는 문법을 사용하므로, Babel과 함께 웹팩에서 사용됩니다. 먼저 필요한 패키지를 설치합니다.

npm install react react-dom
npm install --save-dev @babel/preset-react

 

웹팩 설정 파일에 다음과 같이 Babel 프리셋을 추가합니다.

// webpack.config.js

module.exports = {
  // ... 다른 설정
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

2. Angular와 함께 사용하기

Angular는 TypeScript를 사용하므로, TypeScript와 함께 웹팩에서 사용됩니다. 필요한 패키지를 설치합니다.

npm install @angular/core @angular/platform-browser @angular/platform-browser-dynamic
npm install --save-dev typescript ts-loader

 

웹팩 설정 파일에 TypeScript 로더를 추가합니다.

// webpack.config.js

module.exports = {
  // ... 다른 설정
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

3. Vue와 함께 사용하기

Vue는 웹팩과 함께 사용되기 쉽도록 vue-loader를 제공합니다. 필요한 패키지를 설치합니다.

npm install vue vue-loader vue-template-compiler
npm install --save-dev vue-loader@15.9.6 vue-style-loader

 

웹팩 설정 파일에 Vue 로더를 추가합니다.

// webpack.config.js

module.exports = {
  // ... 다른 설정
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
};

 

웹팩을 통한 React, Angular, Vue와의 통합은 각 프레임워크에 필요한 로더와 플러그인을 설정하여 간단히 구현할 수 있습니다. 이렇게 함으로써 각 프레임워크의 특징을 최대한 활용하면서도 웹팩의 강력한 모듈 번들링 기능을 사용할 수 있습니다.