[Webpack]Dynamic Import시 Script Path 설정

Webpack에서 Dynmaic Import할 시

<script charset="utf-8" src="DashBoard.chunk.js"></script>

와 같이 script path에 모듈 경로가 Prefix로 붙지않는 경우.

발생원인 :  config.js 에서 output 설정에 path만 설정했을 시 default값 ''으로 import하기 때문입니다.

해결방법 :  

module.exports = {
  output: {
    path: path.resolve(__dirname, 'webapp/resources/bundle'),
    publicPath: '/resources/bundle/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
  },
};

config.js에서 publicPath를 설정할 시

결과

위와 같은 결과로 import하게 됩니다.

공식문서

https://webpack.js.org/configuration/output/#outputpublicpath

Output | webpack