[BUNDLING]Webpack Assignment React

React가 아닌 JS를 번들링할 때와 마찬가지로(앞 내용의 번들링까지) 진행하면 터미널에서

Module parse failed: Unexpected token (8:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

라는 오류로 로더가 필요하다는 것을 알림

브라우저에서 JSX를 읽을 수 없기 때문에 babel-loader가 필요함

---

babel-loader

---

설치 npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack

• @babel/core: 핵심 dependency, 주요 스크립트가 포함
• @babel/preset-env: babel 플러그인 설정들. 모든 es6+문법을 es5로 컴파일링할 수 있도록 도와주는 dependency.
• @babel/preset-react: 리엑트의 jsx를 javascript code로 바꿔 줌
• babel-loader: babel과 webpack을 같이 사용할 수 있도록 함

webpack.config.js

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    },
  ];
}

https://webpack.kr/loaders/babel-loader/#root

하고 npx webpack을 하니

Support for the experimental syntax 'jsx' isn't currently enabled

라는 오류 출현

.babelrc 라는 폴더를 만들고

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

추가

하지만 다시 처음과 같은 오류가 발생, css에서 걸림

---

style-loader, css-loader

---

기존과 같은 방식

but,

ERROR in ./src/index.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

새로운 오류 발생

webpack.config.js

use: ["style-loader", "css-loader"],

로더는 오른쪽부터 왼쪽으로 평가/실행됨, 따라서 위처럼 css가 먼저 오도록 하니 에러 해결

---

mini-css-extract-pluginPermalink

---

기존과 같은 방식

---

css-minimized-webpack-plugin

---

기존과 같은 방식

---

webpack-dev-server

---

기존과 같은 방식으로 했으나 docs안의 파일만 보여줌

html-webpack-plugin 적용으로 해결

webpack.config.js

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

  plugins: [ new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "public", "index.html"),
  })],

---

React is not defined 에러

---

위에서 하다가 수정을 한 것이 있는데

webpack.config.js

options: {
  presets: ["@babel/preset-env"];
}

이부분

Uncaught ReferenceError: React is not defined 에러가 발생된다.

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

로 바꿔주면 해결이 되는데

실질적으로 리엑트의 jsx를 javascript code로 바꿔 주는 역을 하는 것이 babel/preset-react이며

"runtime": "automatic"

runtime에는 classic과 automatic이 있는데 기본값은 classic이며 automatic은 JSX가 변환하는 함수를 자동으로 가져온다.

https://babeljs.io/docs/en/babel-preset-react

---

react-hot-loader

---

코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 교체해주는 라이브러리

설치 npm install react-hot-loader

사용하기 위해서는 버전 다운이 필요

npm install --save react@^17.0.1 react-dom@17.0.1

하지만 또 에러발생

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve

캐시를 지워봤지만 안됨 npm cache clean --force

해결된 코드 npm config set legacy-peer-deps true

https://stackoverflow.com/questions/71830754/npm-err-code-eresolve-npm-err-eresolve-unable-to-resolve-dependency-tree-in-re

https://www.npmjs.com/package/react-hot-loader 를 따라 react-hot-loader를 적용하고 build 하지만

Module not found: Error: Can't resolve 'react-dom/client' 오류 발생

npm run eject 를 해주었다.

프로젝트에 숨겨져있는 모든 설치를 밖으로 추출하는 방법

그리고 다시 npm run build

Error: Multiple configuration files found. Please remove one: 오류 발생

.babelrc안 의 내용을 package.json의 babel로 옮김

Using babel-preset-react-apprequires that you specifyNODE_ENVorBABEL_ENV environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. 오류 발생

나중에 다시 시도해봐야 겠다..

---