Menu
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
937
This is because you are using the default injection location for JS just before the tag. One way I have addressed this is by:
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.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
