section1. 2-5. 웹팩으로 빌드하기

1. 웹팩으로 빌드하기

터미널에 아래와 같이 webpack을 입력하면 된다. 

> webpackwebpack

※만약 webpack 명령어 등록이 되어있지 않다면 ? (아래와 같은 방법으로 해결)

[package.json]

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

script 부분에 위와 같이 입력 후 터미널에 아래와 같이 입력한다.

> npm run dev

 

해당 방법도 안되면 npx 사용

> npx webpack 

 

asset app.js 1.59 KiB [emitted] (name: app)
./client.jsx 250 bytes [built] [code generated] [1 error]

ERROR in ./client.jsx 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concep

word_relay-setting (webpack 5.91.0) compiled with 1 error in 75 ms

webpack으로 빌드하면 위와 같이 아래가 발생하는데 위 에러는 client.jsx의

ReactDom.render(<WordRelay/>, document.querySelector('#root'));

해당 코드에서 발생하는 것이다. 전에 실습할 때도 말했듯 js에서는 '<','>' 해당 문자열을 인식하지 못한다. (JSX문법 이해하지 못함.) 그래서 바벨을 사용해야한다.

바벨이 jsx문법을 react.createDom 같은 문법으로 바꿔줌.

 

2. 바벨 설치하기

npm i -D @babel/core : 바벨의 기본적인것

npm i -D @babel/preset-env : 최신 문법을 예전 브라우저 문법에 맞게 바꿔준다.

npm i -D @babel/preset-react : jsx같은 문법을 지원하는 문법으로 바꿔준다.

npm i -D babel-loader : 웹팩과 바벨을 연결

※ @babel/plugin-proposal-class-properties 나는 추가 안해도 되긴했음. (강의에서는 추가해야만 바벨이 원활하게 작동함)

 

[-D 옵션]

개발할 때만 바벨을 사용하기 때문에 -D 옵션을 준다.

 

3. 웹팩과 바벨 연결하기

웹팩과 바벨을 연결 해주는 babel-loader를 설치했으니 webpack.config.js에 문법에 맞게 입력하면 웹팩과 바벨을 연결할 수 있다.

module:{
	rules:[{
    	test: /\.jsx?/,
        loader: 'babel-loader',
        options:{
        	presets:['@babel/preset-env', '@babel/preset-react'],
            //plugins: ['@babel/plugin-proposal-class-properties']
        }
    }]
}

 

entry에 있는 파일을 읽고 거기에 module을 적용한 후 output에 뺀다. 라는 의미로 알고 있으면 될 것 같다.

-rules는 여러 개를 적용할 수 있어서 배열로 작성한다.

-test는 rule을 적용할 파일들 (위의 예시에서는 js와 jsx에 적용하겠다는 정규식)

-loader : 어떤 규칙을 적용할지 작성한다. (예시에서는 바벨 로더를 적용한다라는 의미라고 함.)

-options는 바벨의 옵션들 (option에 있는 plugins는 안써도 에러가 나지 않아서 주석처리해놓음. 관련된 에러가 나면 추가해주면 될듯)

 

이제 터미널에서 다시 해당 명령어를 입력해주면 build가 정상적으로 될 것이다.

(output에 명시된 규칙대로 잘 나왔는지 확인해보면 된다.)

> webpack

혹은 > npx webpack

 

webpack.config.js 전체코드

const path = require('path'); //node에 기본적으로 제공해주는 path를 쉽게 조작하기 위한 라이브러리

module.exports = {
    name: 'word_relay-setting', //어떤 것을 위한 웹팩 설정인지
    mode: 'development', //실서비스에서는 production
    devtool: 'eval', //빠르게
    resolve: {
        extensions: ['.js', '.jsx'] //확장자 적어놓으면 xxx.js, xxx.jsx 알아서 찾아서 빌드한다.
    },
    //여기서 부터가 제일 중요
    //entry : 입력,
    //output: 출력
    entry: {
        app:['./client'] // './WordRelay.jsx' 는 이미 client.jsx에서 불러오고 있기 때문에 굳이 써주지 않아도 된다.
    },

    //webpack과 연결할 모듈들을 적시한다.
    module: {
        rules:[{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options:{
                presets:['@babel/preset-env', '@babel/preset-react'],
                //plugins: ['@babel/plugin-proposal-class-properties']
            }
        }],
    },
    output: {
        //path.join : 파라미터로 전달된 경로를 합쳐준다.
        //__dirname -> 현재 경로(lecture)
        path: path.join(__dirname, 'dist'), //C:\Users\iLovePC\Desktop\codingapple\zerocho-react-webgame\lecture 에 dist를 더해준다.
        filename: "app.js"
    }
}

 

다시 한번 복습

웹팩의 사용 이유

-entry에 있는 여러 파일들을 module의 rules를 적용시켜 output에 적힌 규칙대로 합쳐준다.

-난독화도 시켜준다.