[webpack] webpack-dev-server config 설정 (esbuild-loader, babel-loader)

 

 

webpack dev server 매우 느린 이슈로 인해 해결방안

1. babel-loader → esbuild-loader 변경

2. webpack config 수정

 

module.exports = {
  mode: 'development',
  entry: ['@babel/polyfill', './src/index.js'],
  devtool: false,
  optimization: {
    providedExports: process.env.NODE_ENV === 'prod',
  },
  output: {
    pathinfo: false,
    filename: 'bundle.js',
    path: path.resolve(__dirname + '/dist'),
    publicPath: '/',
    clean: true,
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    historyApiFallback: true,
    // compress: true,
    host: process.env.TEST_IP,
    port: process.env.TEST_PORT,
    https: {
      cert: process.env.TEST_CERT,
      key: process.env.TEST_KEY,
    },
    proxy: {
      '/test': {
        target: `${imsiurl}`,
        changeOrigin: true,
        secure: false,
      }
    },
  },
  cache: { type: process.env.NODE_ENV !== 'prod' ? 'memory' : 'filesystem' },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'esbuild-loader',
          options: {
            loader: 'jsx',
            target: 'es2015',
          },
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: require.resolve('sass-loader'),
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/i,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[contenthash].[ext]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@src': path.resolve(__dirname, 'src/'),
      '@resource': path.resolve(__dirname, 'public/'),
    },
  },
  plugins: [
    (() => {
      return new Dotenv({
        path: `./.env.${process.env.NODE_ENV}`,
      })
    })(),

    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
  ],
}

 

cache 옵션

• true/false (default: true)
• cache.type: memory(default) / filesystem
• cache.compression: 압축 여부 
• cache.maxAge: 생명 주기 

devtool 옵션

• https://webpack.kr/configuration/devtool/

Devtool | 웹팩

• eval-sourc-map
  • fast build / high debug quality
  • 개발 환경 용도 / 빌드 속도가 중요하면서도 디버깅 품질을 유지하고 싶을 때 적합
  • 빌드 시간: 빠름
  • 디버깅 품질: 높음
• source-map
  • highest debug quality
  • 프로덕션 환경 / 디버깅 품질이 중요할 때 사용
  • 빌드 시간: 느림
  • 디버깅 품질: 매우 높음
• false
  • fastest build / No Debug
  • 프로덕션 환경 / 보안상 장점
  • 빌드 시간: 매우 빠름
  • 디버깅 품질: 없음

providedExports 옵션

• true/false (Default: true)
• Tree Shaking: 사용되지 않는 코드를 제거하는 기법. 최종 번들 크기를 줄여줌.
• 트리 쉐이킹 최적화: providedExports 옵션을 사용하면, Webpack은 해당 모듈이 제공하는 특정 내보내기(export) 항목들을 이미 알고 있기 때문에, 어떤 부분이 실제로 사용되지 않는지 추적하여 제거할 수 있습니다. 이를 통해 번들 크기를 더욱 최적화할 수 있습니다.
• providedExports 옵션의 작동 방식:
  1. 내보내기(export) 확인: Webpack은 모듈이 제공하는 내보내기(export) 항목을 알아냅니다.
  2. 트리 쉐이킹: 이후 트리 쉐이킹을 통해 사용되지 않는 내보내기 항목을 제거합니다.
     • 예를 들어, 특정 함수나 객체가 실제 코드에서 사용되지 않으면, 이를 최종 번들에서 제거합니다.
  3. 최적화: 트리 쉐이킹은 번들 크기를 줄이고, 불필요한 코드를 배제하여 로딩 성능을 향상시킵니다.
• 예시와 더 나아가:providedExports와 트리 쉐이킹:참고:
  • providedExports 옵션은 트리 쉐이킹을 더 효율적으로 작동하게 만들어, 번들 크기를 최소화하는 데 기여합니다.
  • 이 옵션은 ES 모듈 기반으로 최적화되므로, ES 모듈 시스템을 사용해야 효과적으로 작동합니다.
  정리하면, providedExports는 모듈의 내보내기(export) 정보가 제공될 때, Webpack이 이를 활용해 불필요한 코드를 제거하는 데 도움을 주는 설정입니다.
• 이 옵션은 기본적으로 Webpack 4 이상에서 트리 쉐이킹을 지원하기 위해 활성화됩니다. providedExports가 true로 설정되면, Webpack은 해당 모듈에서 제공하는 export 항목을 알고 있게 되고, 실제로 사용되지 않은 코드들은 트리 쉐이킹을 통해 번들에서 제거할 수 있습니다.
• 만약 lodash와 같은 라이브러리를 사용하는 경우, providedExports를 설정하면 lodash에서 실제로 사용된 메소드만 번들에 포함시키고, 사용되지 않은 메소드는 제거할 수 있습니다. 이로 인해 최종 번들의 크기가 줄어들게 됩니다.

 

---

Trouble Shooting

• ReferenceError: React is not defined
  • esbuild가 암시적인 React 사용을 감지못해 발생하는 에러
  • index.js / app.js 파일처럼 최상단 위치의 파일에서 아래처럼 global 선언해서 해결

import React from 'react';

global.React = React;