IT/Webpack

[Webpack] webpack-dev-server가 두 번 실행되는 이유

Tesseractjh 2022. 4. 15. 02:55

개발 환경에서 webpack-dev-server를 사용할 때 아래와 같이 두 번 실행되는 경우가 있다.

 

 

이 경우 코드도 모두 두 번씩 실행된다.

이유는 빌드 전의 index.html에서 <script>태그로 js 파일을 불러오고 있기 때문이다.

 

 

어차피 빌드를 하면 번들링된 js파일을 index.html 내부에 <script>태그로 불러온다.

만약 빌드 전의 index.html에서 <script>태그로 js파일을 불러오고 있다면,

HtmlWebpackPlugin이 모든 자바스크립트를 <body>태그 아래로 주입한다.

만약 <script>태그가 꼭 필요하다면, 아래와 같이 HtmlWebpakcPlugin 설정의 inject 속성을 변경하여 해결할 수도 있다.

 

// webpack.config.js

...

plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      inject: false
    })
],

...

 

 

참고자료

https://stackoverflow.com/questions/37081559/all-my-code-runs-twice-when-compiled-by-webpack

 

All my code runs twice when compiled by Webpack

When I build my js bundle with webpack using webpack-dev-server my code runs twice every time. Not sure how to fix it. Screenshot of Developer Tools console My webpack config: var path = require...

stackoverflow.com