[개발환경] webpack(8)

jiseong·2021년 11월 12일

T I Learned

목록 보기

129/291

웹팩 개발 서버

실제 운영환경과 유사하게끔 갖추게 하여 실제 배포시 잠재적인 문제를 확인 할 수 있도록 웹팩에서는 개발 서버를 제공하고 있다.

그리고 실제 번들링된 파일을 생성하지 않고 번들링된 결과를 메모리에 저장하기 때문에 빌드 속도가 빨라 개발 시 유용하다.

웹팩 개발 서버 설치 및 스크립트 등록

$ npm i -D webpack-dev-server

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

결과

이제는 코드가 수정되면 새로고침 할 필요없이 자동으로 반영이 된다.

(react의 CRA에서 어떻게 서버 위에서 돌릴 수 있었는지 궁금했는데 이런 개발서버를 제공해주기 때문에 따로 브라우저에 파일을 직접 로딩할 필요도 없고 코드 수정시 알아서 반영이 되는 것인지 이해할 수 있게 되었다.)

-------옵션 테스트-------

옵션 적용 테스트

// webpack.config.js:
module.exports = {
  mode,
  entry: {
    main: "./app.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist"),
    assetModuleFilename: "[name][ext]?[hash]"
  },
  devServer: {
    port: 9000,
    client: {
      overlay: true,
    },
  },
	// 생략
}