All my code runs twice when compiled by Webpack

Question

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 con

Answer 1

Expanding a bit on @Emil Perhinschi's and @ggloren's earlier replies ...

Alternatively, if your ../src/index.html file does not rely on any script other than <script src="bundle.js"></script>, simply remove the latter from your index.html.

Per https://github.com/jantimon/html-webpack-plugin, the default for inject is true and ...

When passing true or 'body' all javascript resources will be placed at the bottom of the body element.

Thus your two instantiations of bundle.js are:

1. The <script src="bundle.js"></script> that you (presumably) coded, and
2. HtmlWebpackPlugin's injection "at the bottom of the body element".

Answer 2

in the template file you might have manually added a loading the bundle.

If you don't have the

inject: false 

option in

new HtmlWebpackPlugin({
    template: path.join(__dirname, '../src/index.html')
}),

the bundle will get added again.