webpack dev서버를 써야하는 이유 :

웹팩 대상 파일들을 코드 수정하면 항상 npm run build 를 통해서 다시 webpack을 돌려 코드를 빌드하는 과정을 계속해서 반복해야한다.

코드수정 npm run build 코드수정 npm run build 코드수정 npm run build

<aside> 💡 웹팩 dev 서버는 그 환경에서 코드를 수정하고 저장하게 되면 자동으로 웹팩으로 빌드후 브라우저를 새로 고침 해준다.

</aside>

<aside> 💡 추가로 웹팩 dev 서버는 파일레벨에서 실행하는게 아닌 컴퓨터 메모리 레벨에서 돌아가기때문에 파일 탐색기나

</aside>

프로젝트 폴더에는 보이지 않는다

웹팩 데브 서버 실습

일단 npm 으로 설치

npm i webpack-dev-server html-webpack-plugin -D

스크립트 명령어를 추가한다. npm run dev 웹팩 데브 서버를 돌린다.

webpack.config.js

// webpack devserver

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

module.exports = {
  mode: 'none',
  entry: './src/devServer.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    port: 9000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
      template: 'webpack-devserver.html',
    }),
  ],
};