create-react-app 없이 React 구동하기

 

 

create-react-app 없이 React를 구동하기 위해 설치해줘야 할 라이브러리 및 webpack.config.js 파일 내용 정리

 

 

👉 react, react-dom, webpack, webpack-cli

npm init -y
npm install react react-dom
npm install -D webpack webpack-cli

 

👉 babel 관련 라이브러리

npm install -D babel-loader @babel/preset-env @babel/preset-react

 

👉 webpack-dev-server 

npm install -D webpack-dev-server

 

👉 react-refresh  ( 페이지 새로고침 없이 리랜더링 )

npm install -D react-refresh
npm install -D @pmmmwh/react-refresh-webpack-plugin

 

👉 css 라이브러리

npm install -D mini-css-extract-plugin css-loader

 

👉 styled-components

npm install styled-components

 

👉 webpack.config.js 파일 

const path = require('path')  
const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
module.exports = {
 
    name: 'react-project',
    
    mode: 'development',
 
    resolve: {
        extensions: ['.js', '.jsx']
    },
    
    entry: {
        app: ['./src/index.jsx']
    },
 
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader', 
            options: {
                presets: [
                    ['@babel/preset-env', {  
                        targets: {
                            browsers: [  
                                'last 2 chrome versions',
                                '> 5% in KR'
                            ]
                        },
                        debug: true
                    }],  
                    '@babel/preset-react'  
                ],
                plugins: [
                    'react-refresh/babel'
                ]
            }
        },
        {
            test: /\.css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    //
                }
            },
            'css-loader'
            ]
        }]
    },
 
    plugins: [
        new webpackPlugin(),
        new MiniCssExtractPlugin({ filename: 'style.css' }) 
    ],
 
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist'
    },
 
    devServer: {
        static: {
            directory: path.join(__dirname, 'public')
        },
        compress: true,
        port: 3000,
        hot: true,
        historyApiFallback: true 
    },
 
}

 

👉 package.json 파일

{
  "name": "chapter4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack server --env development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
    "babel-loader": "^8.2.4",
    "css-loader": "^6.7.1",
    "mini-css-extract-plugin": "^2.6.0",
    "react-refresh": "^0.12.0",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }
}

 

👉 bundle.js 파일 생성  :  npx webpack

 

👉 npm run dev  :  webpack server --env development

 

👉 디렉토리 구조