Skip to content

Webpack-dev-server

Serves a webpack app. Updates the browser on changes.

watchFiles

파일 변경 사항을 감시할 globs/directories/files 목록을 구성할 수 있습니다. 예를 들면 다음과 같습니다.

webpack.config.js: 

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

historyApiFallback

Vue Router#HTML5 히스토리 모드를 사용할 때 처럼 SPA에서 /path/home를 접근하지만 index.html 내용을 반환하는 상황에 Fallback 옵션을 사용한다. 

module.exports = {
  //...
  devServer: {
    historyApiFallback: true,
  },
};

좀 더 상세히 조정하고 싶다면: 

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        {
          from: new RegExp(publicPath.replaceAll('/', '\\/') + '.*'),
          to: publicPath + 'index.html',
        },
      ],
    },
  },
};

proxy

특정 경로는 다른 서버로 연결하고 싶다면 사용한다. 

module.exports = {
  // ...
  devServer: {
    proxy: {
      '^/plugins': {
        target: 'http://localhost:20000',
        changeOrigin: true,
      },
    },
  },
};

See also

Favorite site