cra없이 첨부터 프로젝트 설정해보기

steyu·2022년 8월 22일

webpack

1. 개발환경 초기화

mkdir webpack-setup
npm init -y

2. 리액트 설치

npm i react react-dom

3. 웹팩 설치

npm i -D webpack webpack-cli
// -D: 개발용으로만 사용됨

4. 파일 설정

4.0 webpack.config.js

const path = require('path');

module.exports = {
  name: 'webpack-set',
  mode: 'development', 
  entry: {main: './index.jsx'},
  output: {
    path: path.join(__dirname, 'dist'), // 현재위치 dist폴더에 생성
    filename: 'app.js'
  }
}

4.1 index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.querySelector('root')
)

4.2 App.jsx

export default function App () {
    return(
        <div>hello</div>
    );
}

4.3 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>

5. webpack 실행

package.json

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

npm run dev

dist폴더 안에 app.js 파일은 정상적으로 생성 되었지만 아래와같이 App파일 타입(.jsx)을 이해할 수 없다고 에러가 뜬다.

6. 해결

6.1 바벨설치

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

babel/core : 바벨의 기본적인 것들이 들어있음.

babel/preset-env : 내 환경에 맞게 알아서 최신문법을 옛날문법으로 바꿔줌

babel/preset-react : jsx지원

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

6.2webpack.config.js 수정

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