[React] webpack.config.js devServer publicPath 오류 / 해결

✓ 문제 

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'publicPath'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

 

✓  원인

webpack-dev-server@4 버전에서는 devServer 안에서 아래와 같은 형태로 publicPath를 지원하지 않는다. 

 

✓ 해결방법 

devMiddleware : webpack이 build 한 파일이 생성 될 폴더의 경로

static : 현재 존재하는 파일이 있는 폴더의 경로

__dirname : webpack.config.js 파일 기준 현재폴더를 의미.

예시 : index.html 파일이 src 폴더 안에 있다면 static: { directory: path.resolve(__dirname, 'src') }

난 webpack.config.js 파일이랑 다른 파일들이 같은 폴더에 있어서 따로 명시 안했다.

 

 

✓ 참고자료

https://webpack.kr/configuration/dev-server/#publicpath

DevServer | 웹팩

https://github.com/ZeroCho/react-webgame/blob/master/2.끝말잇기/webpack.config.js

GitHub - ZeroCho/react-webgame