Each html file include it's own js script

Question

I have a webpack config js like this:

entry: {
    language: path.resolve(__dirname, 'src/scripts/lang.js'),
    config: path.resolve(__dirname, 'src/scripts/config.js'),
    mainFunctions: path.resolve(__dirname, 'src/scripts/utilFunctions.js'),
},

And this script sequence bottom of html file:

<script src="../plugins/jQuery/jquery-3.4.1.min.js"></script>
<script src="../plugins/Popper/popper.min.js"></script>
<script src="../plugins/Bootstrap/bootstrap.min.js"></script>
<script src="../plugins/Magnific/magnificPopup.min.js"></script>


</body>
</html>

So after compile HtmlWebpackPlugin generates a this structure:

<script src="../plugins/jQuery/jquery-3.4.1.min.js"></script>
<script src="../plugins/Popper/popper.min.js"></script>
<script src="../plugins/Bootstrap/bootstrap.min.js"></script>
<script src="../plugins/Magnific/magnificPopup.min.js"></script>


<script type="text/javascript" src=".././js/language-82d9013312d51ba09842.js"></script>
<script type="text/javascript" src=".././js/vendors~config-620ba3d9ae4472f968ab.js"></script>
<script type="text/javascript" src=".././js/config-28c647d3bd0894bac005.js"></script>
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
</body>
</html>

The question is how to include for each html file it's own js script which final result should be like this.

In index.html

// ----- connected scripts in here -------- //
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
<script type="text/javascript" src=".././js/index.js"></script>
</body>

In home.html

// ----- connected scripts in here -------- //
<script type="text/javascript" src=".././js/utilFunctions-1ae3ee4b074ef90d909b.js"></script>
<script type="text/javascript" src=".././js/home.js"></script>
</body>

I can not add to after utilFunctions in entry object (inside of webpack.config.js) then included part will be in every html file.

Also I can not add in html files because order should be like this:First plugins then my own functions. Please help I stuck.

user9760669 · Accepted Answer · 2019-12-18 12:18:16Z

1

You can control the order where webpack will import your files and import a particular one manually

<% if(htmlWebpackPlugin.files.chunks.body) { %>
  <script src="<%= htmlWebpackPlugin.files.chunks.body.entry %>"></script>
<% } %>

<script src="home.js"></script>

The example you can find also at their repo https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html

answered Dec 18, 2019 at 12:18

user9760669

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

4 Comments

Randall Over a year ago

I'm not use ejs.I use simple html.

user9760669 Over a year ago

It does not matter for webpack :)

user9760669 Over a year ago

If you will take a look on the link in my comment you will see there are using simple html as well

Randall Over a year ago

The problem is the last script home.js not generated by the webpack.

Randall · Accepted Answer · 2019-12-18 13:26:37Z

I solve like this:

entry: {
    language: path.resolve(__dirname, 'src/scripts/lang.js'),
    config: path.resolve(__dirname, 'src/scripts/conf.js'),
    mainFunctions: path.resolve(__dirname, 'src/scripts/utilFunctions.js'),
    index: path.resolve(__dirname, 'src/scripts/index.js'),
    home: path.resolve(__dirname, 'src/scripts/home.js'),
},

Added another two chunks to entry index and home

And then in htmlWebpackPlugin wrote this:

['index', 'home'].forEach((file) => {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: `./html/${file}.html`,
      template: `./src/html/${file}.html`,
      chunks:['language','config','mainFunctions', file],
      minify: {
          removeComments: true,
          // collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
      },
    })
  );
})

Collectives™ on Stack Overflow

Each html file include it's own js script

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related