HtmlWebPackPlugin injection location

Question

dev-server, my webpack will build my bundle which includes jquery.

I use html-webpack-plugin, the line of code below will inject my bundle in the body when build prod.

new HtmlWebPackPlugin({
            template: './src/index.html'
        }),

My problem is, in my index.html, I semantic-ui.js, which depends on Jquery,

 <body>
      <my-app>loading...thaison</my-app>

      <script src="./asset/semantic-ui/dist/semantic.min.js"></script>    
  </body>

So when I fire my dev environment or prod build, the bundle appears after semantic hence i have an error. How do I make is so that the dev injection happens before my manual script source?

dev server serve:

webpack-dev-server --inline --progress --port 4000 --content-base src

Joe Dreimann · Accepted Answer · 2017-08-08 14:40:13Z

5

This is because you are using the default injection location for JS just before the tag. One way I have addressed this is by:

Setting inject to false in the HtmlWebPackPlugin config.
Adding an injection point to the index (ejs) template:

Code below:

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
 <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>

You can add this anywhere in the index template you like, and therefore avoid it being injected at the end.

You can read more about the options available in the template in the "Writing your own templates" section. You might want to access the files chunks rather than the raw list of files for example.

answered Aug 8, 2017 at 14:40

Joe Dreimann

2793 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HtmlWebPackPlugin injection location

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related