19. Webpack과 프레임워크 통합 - 2

각 프레임워크에 따른 Webpack 설정

웹팩은 다양한 프레임워크와 라이브러리에 대한 모듈 번들링을 지원합니다. 여러 프레임워크를 사용하는 경우, 각각의 특별한 설정이 필요할 수 있습니다. 이번 글에서는 React, Angular, Vue에 대한 웹팩 설정에 대해 알아보겠습니다.

1. React와 Webpack 설정

React 프로젝트에서 웹팩을 사용하려면 다음과 같이 설정할 수 있습니다.

1.1. 필수 의존성 설치

npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-react

1.2. 웹팩 설정 파일 (webpack.config.js)

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
    ],
  },
};

1.3. Babel 설정 파일 (babel.config.js)

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

2. Angular와 Webpack 설정

Angular 프로젝트에서는 Angular CLI를 사용하는 것이 일반적이지만, 직접 웹팩을 설정할 수도 있습니다. Angular CLI를 사용하지 않는 경우, 다음과 같이 설정할 수 있습니다.

2.1. 필수 의존성 설치

npm install @angular/core @angular/platform-browser @angular/platform-browser-dynamic
npm install --save-dev webpack webpack-cli awesome-typescript-loader

2.2. 웹팩 설정 파일 (webpack.config.js)

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'awesome-typescript-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

2.3. TypeScript 설정 파일 (tsconfig.json)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["es2015", "dom"],
    "types": ["node"],
  }
}

3. Vue와 Webpack 설정

Vue 프로젝트에서 웹팩을 사용하려면 다음과 같이 설정할 수 있습니다.

3.1. 필수 의존성 설치

npm install vue
npm install --save-dev webpack webpack-cli vue-loader vue-template-compiler

3.2. 웹팩 설정 파일 (webpack.config.js)

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
};

 

위 설정에서 vue-loader는 Vue 파일을 해석하고 vue-template-compiler는 템플릿을 분석합니다.

이렇게 React, Angular, Vue에 대한 웹팩 설정을 할 수 있습니다. 각 프레임워크의 특징과 요구 사항에 맞게 설정을 추가하면 웹팩을 통해 효과적으로 모듈 번들링할 수 있습니다.