[Webpack]를 수동으로 설정해보기 (3)

 

 

수 많은 설정 종류와 다양한 플러그인들....현재는 개인적으로 공부하다보니 코드가 적은 webpack.config.js이지만 실무에서는 얼마나 긴 js파일이 될지 상상이 안간다...🥲

 

아무튼! 이번에는 create-react-app을 사용했을 때 처럼 좀 더 규격화된 파일트리에 config파일을 재설정해보도록 하자.

 

 

➡️ 결론 및 요약

 

[ # 그림과 같은 트리 구조로 진행하기 위해 ]

 

* 설치

npm install --save-dev html-webpack-plugin

 

* package.json에서 scripts 설정 변경 및 추가

"build": "webpack",
"dev": "webpack serve --env development"

 

* webpack.config.js 수정

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  name: 'react-webpack-setting',
  mode: 'development',
  devtool: 'eval-source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },

  entry: {
    app: ['./src/index.js'],
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {
                  browsers: ['> 1% in KR'],
                },
                debug: true,
              },
            ],
            [
              '@babel/preset-react',
              {
                runtime: 'automatic', // 새로운 JSX 변환 방식 사용
              },
            ],
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties',
            'react-refresh/babel',
          ],
        },
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new RefreshWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    devMiddleware: { publicPath: '/' },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};

 

---

 

 

1. JSX 변환의 변화

자동 설치로 만든React에서 기본적으로 App.js파일은 아래와 같은 형태인데

import React from 'react';

function App() {
  return <div></div>;
}

export default App;

 

React 17 버전부터는 컴포넌트 파일마다 `import React from 'react' ;` 를 반드시 포함하지 않아도 된다.

이는 새로운 JSX 변환 덕분이다. 17 버전 이전에는 JSX 코드를 사용할 때마다 `React.createElement`를 호출해야 했고, 이를 위해 `React`가 파일마다 필요했다. 따라서 파일 상단에 위의 코드를 import를 추가해야 했다.

그러나 17버전에서는 새로운 JSX 변환을 도입하여, JSX 구문을 자동으로 `React.createElement`로 변환할 필요가 없어졌다. 

 

새로운 변환 방식을 사용하려면 프로젝트에서 다음을 충족해야 한다.

• React 17 버전 이상 사용 (당연...)
• Webpack 설정 파일에 Babel 설정을 추가하는 방법 (웹팩 로더 설정을 통해 이루어져, 이곳에서 설정하였다.)
• babel.config.js 또는 .babelrc 파일에 설정하는 방법

# webpack.config.js

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

`module.rules` 섹션에서 `options` 속성 부분에 presets 속성을 추가해주자.

이 설정은 Babel에게 @babel/preset-react 프리셋을 사용하라고 지시한다. 또한, React 17의 새로운 자동 JSX 변환 기능을 사용하도록 runtime 옵션을 "automatic"으로 설정한다. 이를 통해 React를 명시적으로 import하지 않고도 JSX 코드를 작성할 수 있게 된다.

 

2. index.html 파일에 자동으로 JavaScript 파일을 삽입해주는 기능

create-react-app에서 사용하는 Webpack 설정에는 index.html 파일에 자동으로 JavaScript 파일을 삽입해주는 기능이 포함되어 있다. 이 기능은 주로 HtmlWebpackPlugin이라는 Webpack 플러그인을 통해 구현된다.

 

Webpack과 create-react-app
create-react-app으로 설치된 index.html을 살펴보면 script 파일을 임포트하는 코드가 없다. create-react-app은 Webpack 설정을 내부적으로 처리하며, 사용자는 이를 직접 수정할 필요가 없다. Webpack은 번들링 과정에서 JavaScript 파일을 자동으로 index.html에 삽입하기 때문이다.

 

# webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [
    new RefreshWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],

 

3. entry(진입점) 수정

entry: {
    app: ['./src/index.js'],
  },

 

4. package.json 수정

"build": "webpack",
"dev": "webpack serve --env development"

 

---

 

 

webpack-dev-server는 개발 서버를 실행할 때 메모리에서 번들링된 파일을 제공하므로, 실제로 dist 폴더에 파일을 생성하지 않는다. 대신, 개발 중에 변경 사항을 실시간으로 반영하여 빠르게 확인할 수 있게 해준다.

번들링된 파일을 dist 폴더에 생성하려면 webpack-dev-server가 아니라 webpack 명령어를 사용하여 빌드하면 된다.

 

다음은 위의 설정을 적응하기 위해 실습하면서 생겼던 오류에 대해 작성해보겠다.