[Webpack] 기초적인 개발용 환경 구성하기

 

 

Dependency

• webpack-merge
• webpack-dev-server

Method

1. 각 환경별 공통 설정을 위한 파일을 생성한다.

// webpack.common.config.js

const path = require('path');

const config = {
  entry: 'path-to-entry', //ex)'/src/index.js',
  //각종 플러그인 etc.. 추가..
  output: {
    path: path.resolve(__dirname, 'path-to-distribution'), //ex)'../dist'
    filename: 'name-of-bundle-file' //ex) 'main.js'
  }
  
};

module.exports = config;

2. 각 환경별 설정 파일을 생성한다. 

 

//webpack.dev.config.js

const common = require('./webpack.common.config');
const { merge } = require('webpack-merge');
const path = require('path');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    port: 9000, //dev server가 사용할 포트 지정
    static: {
      directory: path.resolve(__dirname, '../') //번들링 위치 지정
    },
    devMiddleware: {
      //dev server한테 엔트리 파일을 알려준다.
      index: 'index.html',
      //기본적으로 dev server는 메모리에 파일을 생성시키지 디스크에 쓰진 않는다. 따라서 밑에 옵션을 활성화 시켜서 디스크에 쓰기권한을 주자
      //만약 안주면, 번들링된 파일 생성 안됨(dev server로 실행시,)
      writeToDisk: true
    },
    //hot reload 쓸거기때문에 비활성화, liveReload 활성화시, 변경 사항 감지시, 전체 새로고침하게되기에..
    liveReload: false
  }
});