webpack-devSever 경로

오래간만에 react로 간단한 테스트를 하기 위해 router 설정을 하였는데 페이지를 찾을 수 없다는 404에러가 발생하였습니다.
전에도 알고 있던 내용이었는데 제대로 정리를 하지 않아 또다시 찾게된 내용입니다.

webpack-devServer 설정시 이슈

예를 들어 /main 페이지로 이동을 하려고 합니다.
기본적인 세팅을 하면 404에러가 발생합니다.
분명히 라우터를 세팅하였는데 페이지 이동을 하지 않습니다.
일치하는 경로에 react앱을 보내려면 서버가 필요한데 webpack devServer는 임의의 엔드포인트를 처리하고 있지 않습니다.

그러므로 2가지 세팅을 해줘야합니다.

publicPath: '/'
애플리케이션 내의 모든 자산에 대한 기본 경로를 지정할 수 있습니다.

historyApiFallback: true
historyAPIFallback은 404를 /index.html로 리디렉션합니다.

/main 으로 해당하는 assets이 없는 경우 index.html로 리디렉션하므로 react 라우터에서 각 페이지로 이동할 수 있습니다.
즉, 모든 경로에 대해 index.html을 제공하도록 webpack dev 서버에 알려줘야합니다.

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

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
   ** publicPath: '/'**
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
   ** historyApiFallback: true,**
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};