[인프런 강의] zerocho Slack 클론 코딩 (3) - 기본 세팅 webpack, babel

[인프런 강의] zerocho Slack 클론 코딩 (3) - 기본 세팅 webpack, babel

 

 

저번 포스팅에서 이어서 프론트엔드 설정을 계속한다.

webpack과 babel을 설정해야한다. 

웹팩은 모듈 번들러로서의 역할을 하고, 모듈 번들러란 웹 애플리케이션을 구성하는 몇백 개의 자원을 하나의 파일에 합치는 것을 말한다. 자세한 내용은 zerocho님의 React 무료강좌에도 있다고 한다.

 

 

바벨은 이전 포스팅을 링크 해놓았다. 

 

2022.09.29 - [개발/Javascript] - Babel과 polyfill

Babel과 polyfill

 

 

1. 우선 aleecture/webpack.config.js 경로에 파일을 연다. 강좌에는 이미 설정된 파일로 설명을 해준다. 

설정의 내용은 다음과 같다.

// webpack.config.js


// ....
const config: Configuration = {
  name: 'sleact',
  mode: isDevelopment ? 'development' : 'production',
  devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    alias: {
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@utils': path.resolve(__dirname, 'utils'),
      '@typings': path.resolve(__dirname, 'typings'),
    },
  },
  entry: {
    app: './client',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: { browsers: ['IE 10'] },
                debug: isDevelopment,
              },
            ],
            '@babel/preset-react',
            '@babel/preset-typescript',
          ],
          env: {
            development: {
              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        },
        exclude: path.join(__dirname, 'node_modules'),
      },
      {
        test: /\.css?$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false,
      // eslint: {
      //   files: "./src/**/*",
      // },
    }),
    new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: '/dist/',
  },
  devServer: {
    historyApiFallback: true, // react router
    port: 3090,
    devMiddleware: { publicPath: '/dist/' },
    static: { directory: path.resolve(__dirname) },
    proxy: {
      '/api/': {
        target: 'http://localhost:3095',
        changeOrigin: true,
      },
    },
  },
};

 

웹팩 설정은 다음과 같다.

- name : 프로젝트 name

- mode : mode에 따라 'development' : 'production'이 나눠진다.

- devtoos : 'inline-source-map' 아니면 'eval'로 설정한다.

- resolve 

  extensions : 바벨이 처리할 확장자 목록이다.

  alias : 이전 포스팅에서 tsconfig.json에 설정한 것처럼../../../hello.js 와같은 경로를 바꿔준다. 타입 스크립트와 자바스크립트 모두 설정해줘야 한다.

- entry : 클라이언트 메인 파일을 설정해준다 현재는 루트의 client.tsx 가 메인 파일이 된다.

- module : tsx와. css파일을 바벨 로더가 자바스크립트로 바꿔주는데 바꿨을 때 자바스크립트에 대한 설정이다.

module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                //타겟에 최신 IE 10이나 'last 2 chrome versions' 와같이 브라우저를 선택할 수 있다.
                targets: { browsers: ['IE 10', ] },
                debug: isDevelopment,
              },
            ],
            '@babel/preset-react',
            '@babel/preset-typescript',
          ],

- plugins : 플러그인들을 설정해준다.

- output : 웹팩 빌드 시 output을 설정할 수 있다.

 

//개발환경에 쓸 플러그인
if (isDevelopment && config.plugins) {
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));
}
//개발환경이 아닐때 플러그인
if (!isDevelopment && config.plugins) {
  config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
}

 

웹팩 이전에 typescript로 변환을 해주고 웹팩이 받아서 바벨로 처리해서 javascript 파일로 변환시켜준다.

 

 

2. 아직 설치가 되어있지 않은 webpack과 babel 등등의 패키지를 설치해준다. 다음과 같은 명령어를 입력한다.

추가로 타입 스크립트도 설치해준다.

 

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

 

// 타입스크립트
npm i -D @types/webpack @types/node @babel/preset-typescript

 

3. css 관련된 패키지도 설치해준다.

 

npm i style-loader css-loader

 

4. 루트 경로에 index.html이 없다면 먼저 만들어줘야 한다.

 

index.html은 다음과 같은 내용이다. 프론트 개발을 하다 보면 index.html을 놓치는 경우가 많은데 가장 중요한 파일이다.

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>슬리액</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: initial !important;
        }
        body {
            font-size: 15px;
            line-height: 1.46668;
            font-weight: 400;
            font-variant-ligatures: common-ligatures;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
        }
        * {
            box-sizing: border-box;
        }
    </style>
    <link rel="stylesheet" href="https://a.slack-edge.com/bv1-9/client-boot-styles.dc0a11f.css?cacheKey=gantry-1613184053" crossorigin="anonymous" />
    <link rel="shortcut icon" href="https://a.slack-edge.com/cebaa/img/ico/favicon.ico" />
    <link href="https://a.slack-edge.com/bv1-9/slack-icons-v2-16ca3a7.woff2" rel="preload" as="font" crossorigin="anonymous" />
  </head>
  <body>
    //프론트엔드 시작점
    <div id="app">

    </div>
    <script src="/dist/app.js"></script>
  </body>
</html>

 

우리가 사용하는 React  소스는 <div id="app"> </div> 사이에 들어가게 된다.

 

5. 나는 webpack.config.js 에 모듈이 읽히지 않아 다음과 같은 명령어로 설치해주었다.

 

npm i fork-ts-checker-webpack-plugin webpack-bundle-analyzer webpack-dev-server @pmmmwh/react-refresh-webpack-plugin

 

추가로 아래의 명령어도 같이 설치하였다.

npm i --save-dev @types/webpack-bundle-analyzer

 

그랬더니 빨간 줄이 사라졌다.

 

---

 

여기까지가 웹팩과 바벨 설정의 기본 세팅을 완료한 것이다.

 

 

 

출처 : 슬랙 클론 코딩 zerocho
https://www.inflearn.com/course/클론코딩-실시간채팅