웹팩으로 번들링하기-react

김남경·2023년 1월 19일

react

목록 보기
22/37

최초 설정

📗 package.json 시작

npm init -y

📗 src 구성
src 파일만 복사(react로 만든)

📗 웹팩 설치

npm install -D webpack webpack-cli

번들링 준비

📗 react, react-dom 설치

npm install react react-dom

📗 scripts 추가

//package.json
  "scripts": {
    "build": "npx webpack"
  },

Babel loader

📗 babel 설치

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

📗 babel.config 설정

//babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env"],
    ["@babel/preset-react", { runtime: "automatic" }],
    //runtime : 빌드시 마다 작동
  ],
};

📗 webpack.config 설정

//webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

style loader

📗 css, style loader 설치

npm i -D css-loader style-loader

📗 webpack.config 설정

//webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {//style loader 설정 추가
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
};

HTML Plugin

📗 src 안에 index.html 추가

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main id="root"></main>
</body>

</html>

📗 html plugin 설치

npm i -D html-webpack-plugin

📗 webpack.config 설정

//webpack.config.js
const path = require("path");
//html plugin 변수 추가
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [//플러그인 추가
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

Output 설정 변경

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",//자동 이름 설정
    clean: true,//빌드시마다 삭제
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

Mode 설정

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

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  mode: "development",//개발 모드(설정해야 캐시 삭제됨)
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],
};

Asset 설정

📗 minify 설치

npm i mini-css-extract-plugin -D
npm i css-minimizer-webpack-plugin -D

📗 webpack.config 설정

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//css minify 변수 설정
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        //style loader와 함께 쓸 수 없음
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "dist", "index.html"),
    }),
    new MiniCssExtractPlugin({
      linkType: false, // 기본 값 'text/css'
    }),
  ],
  optimization: {//minimizer 설정 추가
    minimizer: [new CssMinimizerPlugin()],
  },
};

개발용 서버

📗 dev-server 설치

npm install --save-dev webpack-dev-server

📗 webpack.config 설정

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  mode: "development",
  devServer: {//서버 설정 추가
    static: "./dist",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin({
      linkType: false, 
    }),
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
    runtimeChunk: 'single',//서버 설정 추가
  },
};

📗 scripts 추가

//package.json
 "scripts": {
    "build": "npx webpack",
    "dev-server": "webpack serve --open"
  },

hot loader

📗 React 버전 낮추기

npm install react@17 react-dom@17

📗 hot loader 설치

npm install react-hot-loader

📗 babel.config 설정

//babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env"],
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
  plugins: ["react-hot-loader/babel"],//hot-loader 설정 추가
};

📗 App.js 추가

//App.js
import { hot } from "react-hot-loader";

//export default App;
export default hot(module)(App);

📗 index.js 수정

//index.js
//import ReactDOM from "react-dom/client";
import { render } from "react-dom";

// const root = ReactDOM.createRoot(document.getElementById("root"));
// root.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );
const container = document.getElementById("root");
render(<App />, container);

script start 설정

📗 react-scripts 설치

npm install react-scripts

📗 index.html 옮기기
public 파일 생성 후 src/index.html 파일 복사

📗 webpack.config 설정

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  mode: "development",
  devServer: {
    static: "./dist",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      //src -> public 변경
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new MiniCssExtractPlugin({
      linkType: false,
    }),
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
    runtimeChunk: "single",
  },
};

📗 src/index.html 삭제

📗 에러 대처
npm run start 하면 콘솔에
Uncaught SyntaxError: Unexpected token '<'가 뜨는 경우

//package.json
{
  "homepage": ".",
}

bundle-analyzer

📗 webpack-bundle-analyzer 설치

npm install --save-dev webpack-bundle-analyzer

📗 webpack.config 설정

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// analyzer 변수 추가
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  mode: "development",
  devServer: {
    static: "./dist",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
    new MiniCssExtractPlugin({
      linkType: false,
    }),
    new BundleAnalyzerPlugin(),//플러그인 추가
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
    runtimeChunk: "single",
  },
};

📗 확인
npm run build나 npm run dev-server 하면
확인 가능

참고

https://juni-official.tistory.com/158
https://velog.io/@kbing14/Webpack-%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0
https://stackoverflow.com/questions/61367555/urierror-failed-to-decode-param-public-url-manifest-json
https://smoothlog.com/react-hot-loader-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://haerim95.tistory.com/8
https://velog.io/@1-blue/react%EC%84%B8%ED%8C%85-webpack-eslint-prettier
https://80000coding.oopy.io/1d0689df-8e3a-4f1d-8284-75eedbef53db
Uncaught SyntaxError: Unexpected token '<'
webpack bundle analyzer 웹팩 플러그인 설정 방법
Cleaning up the /dist folder

profile
김남경
기본에 충실하며 앞으로 발전하는
이전 포스트

웹팩으로 번들링하기

다음 포스트

Virtual DOM

0개의 댓글