![[Webpack] webpack-dev-server가 두 번 실행되는 이유](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FYwffp%2Fbtrzlh2wSWh%2FAAAAAAAAAAAAAAAAAAAAAFePBdnYJaxc0sb-tmOaznYvq2e39ieANS1ZwgQDGqZU%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D%252B0A1iF1p%252BMmYlUjThCTKf317LZ4%253D)
개발 환경에서 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
'IT > Webpack' 카테고리의 다른 글
| [Webpack] build할 때 LICENSE.txt 생성되지 않게 하기 (0) | 2022.06.16 |
|---|