React 개발환경 세팅하기(without CRA) - 1. webpack 설치하기

jungsw586·2019년 11월 27일
1
  1. 프로젝트 디렉토리 생성
npm init -y
  1. 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>
  1. 웹팩설치 및 설정
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
profile
Show me the code

0개의 댓글