웹펙으로 빌드하기

터미널 창에서 그냥 webpack를 치면 아래 문구가 발생

webpack
webpack : 'webpack' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십
시오.
위치 줄:1 문자:1
+ webpack
+ ~~~~~~~
    + CategoryInfo          : ObjectNotFound: (webpack:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

그래서 명령어로 등록을 따로 해주어야 한다. 또는 package.json파일에 script에다가 적어주면 된다.

 

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

 

그리고 명령어 npm 또는 npx를 넣어준다.

npm run dev

npx webpack를 넣어주게 되면 dist폴더에 app.js파이링 생성

npx webpack

아래와 같이 에러가 발생한다.(React.render(<WordRelay />, document.querySelector('#root'));

jsx는 js파일이 아니므로 webpack에 babel을 추가로 세팅해준다.(jsx를 처리하기 위해서)

babel안에서도 jsx를 처리해줘야 한다.

 

babel도 개발용에서만 쓰이므로 아래 명령어 실행 core는 바벨 기본적인 거 들어있는거 

babel/preset-env가 사용자의 브라우저에 맞게 알아서 최신문법을 옛날문법으로 바꿔준다.(옛날문법 지원)

npm i -D @babel/core @babel/preset-env

 

그리고 npm i @babel/preset-react 추가 (jsx를 지원해준다.)

npm i @babel/preset-react

 

loader은 웹팩과 바벨을 연결해준다.

npm i babel-loader

 

webpack.config.js에 코드 추가.

entry에 있는 파일을 읽고 module을 적용한 후에 output에 뺀다라고 해석하면 의미가 확실해진다.

// webpack.config.js


const path = require('path');

module.exports = {
    name: 'wordrelay-setting',
    mode: 'development', // 실서비스: production
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx']
    },

    entry: {
        app: ['./client'],
    }, // 입력

    module: {},

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }, // 출력
};

 

module 부분에 rules를 넣어주는데 js와 jsx파일을 적용해주겠다라고 정규표현식 작성

그리고 options를 넣어주어 jsx파일 or js파일을 바벨을 적용해준다.

 // webpack.config.js
 
 module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                
            },
        }],
    },

 

명령어로 npx webpack 

혹시 모르니 npm i -D @babel/plugin-proposal-class-properties도 추가하자 라고 하면 에러가 나니 plugin은 제외하고 npx webpck 실행

npm i -D @babel/plugin-proposal-class-properties

npx webpack

// webpack.config.js 에러발생

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

            },
        }],
    },

// webpack.config.js

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

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }, // 출력
};

 

 

 

WordRelay.jsx 문구를 아래와 같이 추가

// WordRelay.jsx
const React = require('react');
const { component } = React;

class WordRelay extends Component {
    state = {
        text: 'Hello, webpack',
    };

    render() {
        return <h1>{this.state.text}</h1>
    }
}

module.exports = WordRelay;

// client.jsx

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

const WordRelay = require('./WordRelay');


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

결과 출력

 

 

 

 

 

 

 

 

 

 

 

 

<출처 조현영: 웹 게임을 만들며 배우는 React>

https://www.inflearn.com/course/web-game-react/dashboard

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