Webpack

Webpack 등장 이유

여러개의 Javascript를 브라우저에서 로딩을 하게되면 반응속도가 많이 느려진다.

여러개의 Javascript를 하나의 Javascript 파일로 관리하는데 어려움이 있다.

Webpack 설치 (yarn)

Webpack은 개발환경에서만 사용하므로 -D로 옵션을 넣어준다. (-D : -development)

Webpack을 사용하려면 webpack과 webpack-cli를 설치해야한다.

yarn add -D webpack webpack-cli

Webpack.config.js

webpack세팅

const path = require("path");

//webpack 공식문서 https://webpack.js.org

module.exports = {
  mode: "development",
  devtool: "eval", // production 일때는 hidden-source-map
  resolve: {
    extensions: [".jsx", ".js"], // 확장자 생략
  },
  entry: {
    app: "./client",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // js or jsx
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              // https://github.com/browserslist/browserslist#queries
              // preset은 plugin들의 집합
              {
                targets: { browsers: [">1% in KR"] }, // 한국 점유율 1퍼센트 이상 브라우저에서만 지원
                debug: true,
              },
            ],
            "@babel/preset-react", // JSX문법을 사용할 수 있게 하는 preset
          ],
          plugins: [],
        },
      },
    ],
  },
  output: {
    filename: "app.js",
    path: path.join(__dirname, "dist"), // __dirname: 현재경로, 'dist': 폴더명
  },
};

Client.jsx

const React = require("react");
const ReactDOM = require("react-dom");

const GuGuDan = require("./GuGuDan");

// index.html 파일 내 id="root"인 div태그 내에 <GuGuDan /> render
ReactDOM.render(<GuGuDan />, document.querySelector("#root"));

Webpack 실행

pakage.json에 밑에 객체를 추가한다.

"scripts": {
  "dev": "webpack"
},

이 명령어로 실행하면 웹팩이 실행된다.

실행이 되면 dist에 app.js( js or jsx 파일을 하나로 합친 것 )가 생성됨

npx webpack

index.html

script 태그 내에 src="./dist/app.js" 속성을 넣어주면 생성된 app.js가 실행

<html>
  <head>
    <meta charset="UTF-8" />
    <title>구구단</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
  </body>
</html>

index.html을 실행하면 됨

'개발 > React' 카테고리의 다른 글

Component 라이프사이클 (0)	2022.01.24
렌더링 최적화 (0)	2022.01.17
Webpack Dev Server 와 Hot Reloading (0)	2022.01.10
함수형 컴포넌트(Functional component) + 구구단 게임 (0)	2021.12.30
Class형 Component + 구구단 게임 (0)	2021.12.30