11.5(금) 웹팩 데브 서버와 핫 리로딩

💻 참고 사이트 : https://www.youtube.com/watch?v=RCb0UF7Lu90

웹팩 데브 서버와 핫 리로딩 설정하기

11.2(화) TIL에 이어서 작성하는 포스트이다. 개발 모드라면 응당 핫 리로딩이 되는게 훨씬 편하다. 내가 이해하는 핫 리로딩은 소스코드가 변경되었을때 자동으로 그 수정사항이 바로바로 반영되는 것을 말한다. CRA를 사용해봤다면 소스코드가 변경되면 바로 반영되는 그 동작을 말하는 것이다.

앗... 영상을 보다보니 핫 리로딩은 상태까지 저장이 되어야 진정한 핫 리로딩이라고 한다. 즉, 우리가 뭔가를 테스트 중에 소스코드를 고쳤다고 해서 초기화되지 않는게 바로 핫 리로딩인 것이다. (오호)

일단 그러기 위해서는 웹팩 데브서버와 핫 리로딩 설정이 필요하다.

라이브러리 설치

핫 리로딩과 관련된 라이브러리를 먼저 설치해주자.

yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh

• react-refresh : "핫 리로딩"으로 알려진 이전 기능과 유사하지만 빠른 새로 고침이 더 안정적이고 React에서 공식적으로 지원합니다. (참고)
• @pmmmwh/react-refresh-webpack-plugin : React 구성 요소에 대해 "빠른 새로 고침"( Hot Reloading 이라고도 함)을 활성화 하는 실험적 Webpack 플러그인 입니다. (참고)

그니까 react-refresh를 쉽게 사용하기 위한 플로그인을 제공하는 것이 @pmmmwh/react-refresh-webpack-plugin 아닐까 생각해본다.

그리고 나서 웹팩 데브 서버를 설치해줍니다. 라이브 재로딩을 제공하는 개발 서버...

yarn add -D webpack-dev-server

webpack.confing.js 설정

const path = require("path");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  name: "wordreplay-setting", // 사실 별 필요는 없지만 처음에 있는거?
  mode: "development", // 모드 설정. 운영모드라면 production 로 바꿔주면 된다. 이건 환경변수로 설정해서 조건문 걸어서 바꿔주는게 좋다.
  devtool: "eval", // 이건 뭐시여
  resolve: {
    // 웹팩이 알아서 경로나 확장자를 처리할 수 있게 도와주는 옵션
    extensions: [".js", ".jsx"],
  },
  entry: {
    // 시작점. 우리는 시작점을 client.jsx로 할 거임. 근데 resolve 설정을 했으니까 jsx는 입력할 필요가 없음
    app: "./client",
  },
  module: {
    rules: [
      {
        // js, jsx 파일에 바벨을 적용해서 최신문법을 옛날문법으로 호환되도록 바꿔주겠다
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["react-refresh/babel"], // ✅
        },
      },
    ],
  },
  plugins: [new ReactRefreshWebpackPlugin()], // ✅
  output: {
    // 빌드시 생성되는 폴더와 파일명
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist",
  },
  devServer: { 
    // ✅ 개발 서버 
    devMiddleware: {
      publicPath: "/dist", // 나중에 웹팩 실행시 생성될 경로(dev인 경우에는 실제 생성이 아닌 메모리에 올라간다고 함)
    },
    static: {
      directory: path.resolve(__dirname), // 실제로 존재하는 경로
    },
    hot: true,
  },
};

• ReactRefreshWebpackPlugin : 핫 리로딩을 위한 플로그인 설정. 이게 없으면 핫 리로딩이 안된다. (결과도 안나오는디?)
• plugins: ["react-refresh/babel"] : 바벨에다가 핫 리로딩 기능을 추가하기 위해서 필요하다고 한다. 이게 없어도 동작은 되는듯...?
• publicPath : 빌드 시 상대경로를 어떻게 설정하느냐에 대한 설정.. 예를 들어 http://localhost:5000이라고 설정했다면 url(‘./test.png’)에 대해서 url(‘http://localhost:5000/test.png’);로 치환되어서 결과가 반환될 거? (내가 이해한 바로는 그렇다 - 참고)
• devMiddleware.publicPath : 나중에 웹팩 실행시 생성되는 폴더 경로? 이걸 제대로 설정해줘야 그 경로를 통해 결과를 메모리에 올린다고 한다.
• static : 실제로 존재하는 경로... index.html이 프로젝트 경로 내에 있기 때문에 위와 같이 설정. 만약 src 폴더 안에 있다면 path.resolve(__dirname, src)로 설정해야 할 것.

음... 솔직히 이해가 안되는 부분이 없지 않아 있지만 그건 실제 웹팩 설정을 사용해보면서 배우는 편이 좋을 거 같다...

테스트 해보기

실행시키는 명령어가 조금 달라졌다. 아래와 같이 수정해주자.

  "scripts": {
    "dev": "webpack serve --env development"
  },

그런다음 실행 시켜보면 데브 서버가 실행되면서 어디로 접속해보라는 URL이 나올 것이다.

접속한 다음에 잘 나오는 것을 확인하고, jsx 코드를 한번 수정해본 다음에 핫리로딩이 적용되는지 확인해보자.

마치면서

어쨌거나 여기서 배운 부분은 핵심적인 부분에 대해서만 배운 것이다. 개발환경과 배포환경에 대해서도 설정을 달리 해야 하는 로직도 필요하고, 여러가지 플러그인도 많이 존재하고... 그래서 웹팩이 어렵게 느껴지는게 아닐까 싶다.

웹팩 설정을 그리 자주하는 것도 아니라서 쉽게 익숙해지지 않는 것도 한몫하는 듯...ㅠㅠ