[React] CRA(Create-React-App) 없이 리액트 프로젝트 세팅하기

1. 리액트를 사용하고 싶은 프로젝트의 디렉터리에 들어간다.

 

2. 아래의 명령어를 통해 노드 프로젝트를 생성-초기화 하며 package.json을 만든다

npm init -y

 

3. JSX 컴파일을 위한 Babel을 설치한다.

npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react

babel-loader는 웹팩과 같이 사용하기 위해 다운해준다.

 

4. Webpack 설치

npm install --save-dev webpack webpack-cli webpack-dev-server

5. htmlWebpackPlugin 설치

npm install --save-dev html-webpack-plugin

6. react, react-dom 설치

npm install react react-dom 

7. 프로젝트 폴더 안에 babel.lrc파일을 만들고 아래 코드를 넣어준다.

{
    "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", { "runtime": "automatic" }]
    ]
}

"runtime":"automatic" 으로 바꾼다. 최신 jsx-transform 기능을 이용할 수 있도록 한 것이다. 아래 링크 추가 설명

https://ko.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Introducing the New JSX Transform – React Blog

 

8. webpack.config.js파일을 프로젝트 폴더 내에 만들고 아래와 같이 추가한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  target: 'web',
  devServer: {
    port: '5000',
    static: {
      directory: path.join(__dirname, 'public')
},
    open: true,
    hot: true,
    liveReload: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        use: 'babel-loader', 
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html')
    })
  ]
};

9. package.json에 다음과 같이 추가한다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server .",
    "build": "webpack ."
  },

10. file loader 설치 후 webpack.config.js에 아래의 설정을 추가한다.

{
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        use: ["file-loader"],
      },

11. css loader/style loader 설치후 webpack.config.js 에 아래의 설정을 추가한다.

$ npm install --save-dev style-loader css-loader

module.exports = {
  module: {
    rules: [
      // CSS 파일 로더 설정
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}