Why do I have to put bundle.js script in html when running webpack-dev-server

Question

I'm running webpack-dev-server from my package.json script.

When I don't put tag in my index.html, bundle is not being loaded even when webpack-dev-server should put it there automatically.

My code looks like this:

<body>
  <div id="my-app"></div>
  <script src="bundle.js"></script>
  <script type="text/javascript" src="app.bundle.aa2801db8d757c2f2d78.js"></script>
</body>

I put the first bundle there when running webpack-dev-server and second bundle got generated by HTMLWebpackPlugin when I built project for production. Basically I want to get rid of the first bundle in my production code.

Thanks for any suggestions.

I'm confused. Can you share some html code to illustrate what's going on? — Dan Esparza
– Dan Esparza, Commented Jul 25, 2017 at 12:20

Arjan Einbu · Accepted Answer · 2017-07-25 12:38:14Z

You need to reference your javascript bundle from your HTML, because it is not inserted there automatically.

You can however use the HtmlWebpackPlugin to have the bundle reference added automatically. It's added to the plugins section of your webpack.config.js file like this:

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./source/index.js",
    module: {
        // keep the rules you've already got
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        // ... keep all your other plugins here...
    ]
}

Make sure the value of template points to your HTML file...

Source: This code was taken from my webpack project template on github. You can see the full configuration files and more explanatory text there.

Vikram Saini · Accepted Answer · 2017-07-25 12:24:07Z

0

so what i understand is you don't know the importance of bundle.Basically whenever you run your code it compiles everything(including all your components of application) in bundle.js.

you can have a look at bundle.js once the webpack is compiled successfully.You will see that webpack compiles and resolves everything in that bundle only.

hence it is important to add that in your webpack else your code will never run.

answered Jul 25, 2017 at 12:24

Vikram Saini

2,7521 gold badge21 silver badges33 bronze badges

2 Comments

Matus Over a year ago

Yes, you are right. But when I'm trying to build my project for production I don't want "bundle.js" file included in html because HTMLWebpackPlugin puts it there.

Matus Over a year ago

basically what happens is that I have two bundles in index. <script src="bundle.js"></script> <script type="text/javascript" src="app.bundle.aa2801db8d757c2f2d78.js"></script> I want to get rid of the first one

Collectives™ on Stack Overflow

Why do I have to put bundle.js script in html when running webpack-dev-server

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related