webpack 설정 및 설명

🎯 webpack 설정 및 설명

• webpack에 대해서 하나하나 알아보자.

 

📝 npm으로 리액트 설정하기

npm itit
npm i react-dom
npm i -D webpack webpack-cli
npm i babel-loader @babel/core
npm i -D @babel/preset-env // 알아서 환경에 맞게 바벨로 맞춰주는 거
npm i -D @babel/preset-react // jsx 쓸 수 있음

• "@babel/core" - 기본, 최신 문법으로 변환
• "@babel/preset-env" - 각자 컴퓨터 환경에 맞게 바꿔주는 거
• "@babel/preset-react" - jsx 바꿔주는 거
• "babel-loader" - 바벨이랑 웹팩 연결해주는 거
• "webpack"
• "webpack-cli"

 

📝 webpack 기본 설정

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'eval',

    entry: {

    },

    module: {
        rules: [{

        }],

    },

    plugins: [

    ],

    output: {

    },

};

• entry
• module
• plugins
• output

 

📝 webpack 설명

const path = require("path");
const webpack = require("webpack");

module.exports = {
    name: "gugudan-setting", // 웹팩 설정 이름
    mode: "development",
    devtool: "eval", // 실 서비스에서는 : production
    resolve: {
        extensions: [".js", ".jsx"],  // 이렇게 작성해 주면 알아서 client.js 나 client.jsx가 있는지 알아서 확인한다.
    },

    // 입력
    entry: {
        app: "./client", // resolve를 작성해 줌으로써 확장자를 안 적어줘도 된다.
    },

    // 엔트리에 파일을 읽고 모듈을 적용해서 아웃풋으로 뺀다
    module: {
        rules: [
            {
                test: /\.jsx?/, // js랑 jsx 파일에 룰을 적용하겠다.
                loader: "babel-loader", //js랑 jsx 파일에 바벨 룰을 적용하겠다.

                // 바벨 옵션
                options: {
                    // plugin들의 모음이 preset이다.
                    presets: [
                        // ['프리셋 이름', {설정 요소들}]
                        ["@babel/preset-env", {
                            targets: {
                                browsers: ["> 5% in KR", "last 2 chrome versions"], // browserlist
                            },
                            debug: true,
                        }],
                        ["@babel/preset-react"],
                    ],
                    plugins: []
                },
            }],
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true })
    ],

    // 출력
    output: {
        filename: "app.js",
        path: path.join(__dirname, "dist"), // 현재 폴더 경로 안에 들어 있는 dist 폴더 경로를 간편하게 표기
    },
};

 

📌 참고

• [무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의