Webpack Dev Server Setting

1. npm i webpack webpack-dev-server --save-dev

2. npm install webpack-cli  --save-dev 

3. npm init -y 

4.package.json 파일에 "scripts": { "start": "webpack-dev-server" } 추가

5.webpack.config.js 파일에 아래 코드를 넣어준다.

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'), //번등링한 결과가 위치할 번들링 파일의 절대 경로
    publicPath: 'dist' //브라우저가 참고할 번들링 결과 파일의 URL 주소(CDN을 사용하는 경우 CDN 호스트 지정)
  },
  devtool: "cheap-eval-source-map", //개발 환경에서 쉽게 디버깅 할수있게
  devServer: {
    publicPath: "/dist/", // 꼭 양쪽에 / 표시를 넣어준다. 
    port: 9000 // 원하는 포트 번호 
  },
};

6. npm start 가 webpack-dev-server 대신한다. 

 

부록)

output.path : 번등링한 결과가 위치할 번들링 

output.publicPath : 브라우저가 참고할 번들링 결과 파일의 URL 주소를 지정(CDN 을 사용하는 경우 CDN 호스트 지정)

//publicPath 예제 1

output: {
    filename: 'bundle.js',
    path: "/home/proj/public/assets/",
    publicPath: '/assets/' 
  },

//publicPath 예제 2

output: { 
    filename: 'bundle.js', 
    path: "/home/proj/public/assets/[hash]",
    publicPath: 'http://cdn.example.com/assets/[hash]' 
  },