1. 프로젝트 디렉토리 생성

    npm init -y
  2. index.html 만들기
    root폴더에 index.html 생성
    script에
    번들 코드 추가

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8" />
     <title>Hello React!</title>
    </head>
    <body>
     <div id="example"></div>
    
     <!-- Dependencies -->
     <script src="./node_modules/react/umd/react.development.js"></script>
     <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    
     <!-- Main -->
     <script src="./bundle.js"></script>
    </body>
    </html>
  3. 웹팩설치 및 설정

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

package.json의 script에
start 명령어 코드 설정

"start": "webpack-dev-server --config ./webpack.config.js --mode development"

root폴더에 webpack.config.js파일생성

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  }
};
  1. 개발서버 실행해보기
    root폴더에 src폴더 생성후 index.js 파일 생성
    index.js 에
    console.log("hello world") 입력후
    npm start