[webpack] webpack-dev-server v4.0.0

webpack-dev-server 4.0 버전이 릴리즈되면서 webpack.config.js 파일에 적용하는 devServer 옵션이 변경되었다. v4에서 변경된 옵션과 함께 기존에 있던 옵션 중 유용한 것들을 몇 개 정리해 보았다.

devMiddleware.publicPath

기존 v3에서는 번들링한 결과물을 브라우저에서 접근할 경로를 설정하고자 할 경우 devServer의 옵션으로 publicPath를 설정해 주었다. publicPath는 v4에서 devServer의 devMiddleware라는 옵션으로 이동하였다.

v3.

module.exports = {
  devServer: {
    publicPath: '/dist',
  },
};

v4.

module.exports = {
  devServer: {
    devMiddleware: {
      publicPath: '/dist',
    },
  },
};

static

기존 v3에서는 정적 파일들이 위치하는 디렉토리를 설정할 때 contentBase 옵션을 사용하였다. v4에서는 static 옵션으로 변경되었으며 기본값이 public 디렉토리로 설정되어 있다. 정적 파일들의 위치를 설정하지 않을 경우 static: false 로 설정해주면 된다.

v3.

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'public'),
  },
};

v4.

아래 설정값은 기본 값과 동일하다.

module.exports = {
  devServer: {
    static: path.resolve(__dirname, 'public'),
  },
};

static옵션을 객체로 사용하면 정적 파일과 관련된 다른 세부 옵션들을 설정할 수 있다. 이 때 정적 파일의 디렉토리는 diectory 옵션으로 변경된다.

아래 설정값은 static에 디렉토리를 바로 입력했을 때와 동일하다.

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
};

publicPath

기존 v3에서 contentBasePublicPath 옵션으로 정적 파일들을 브라우저에서 접근하는 경로를 설정해주었다. v4에서 contentBasePublicPath 옵션은 static 옵션으로 이동해 publicPath옵션으로 변경되었다.

아래와 같이 설정할 경우, 브라우저에서 http://localhost:8080/assets 경로에 접근하면 서버 /public 디렉토리의파일을 불러온다.

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/assets',
    },
  },
};

watch

static.directory 옵션에 설정한 정적 파일이 수정될 경우 페이지 전체를 새로고침 할지 설정하는 옵션이다. 기본값은 true이다.

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/assets',
      watch: true,
    },
  },
};

serveIndex

static.directory에 설정된 디렉토리에 index 파일이 없을 경우 webpack-dev-server의 기본 디렉토리 리스팅 페이지를 노출할지 설정한다. 기본값은 true이다.

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
      serveIndex: true,
    },
  },
};

watchFiles

변경사항을 관찰할 디렉토리, 파일을 설정한다. watchFiles에 설정한 디렉토리나 파일을 수정할 경우 서버 전체를 새로고침 한다. 문자열로 하나의 값만 지정하거나, 배열로 여러 값들을 지정할 수 있다.

module.exports = {
  devServer: {
    watchFiles: ['src/**/*.php', 'public/**/*'],
  },
};