Using webpack with a .html entry

Question

How can I webpack a web app into an output .html file, starting from a traditional input .html?

Here is a simple starting point:

index.html

<body>
  <output></output>
  <script src="./main.js"></script>
</body>

main.js

import React from "react";
document.querySelector("output").innerText = React.version;

webpack.config.js

module.exports = {
  entry: "./index.html",
  output: {
    filename: "output.html"
  },
  module: {
    rules: [
      {test: /^index\.html$/, use: [
        {loader: "extract-loader"},
        {loader: "html-loader", options: {
          attrs: ["script:src"]
        }}
      ]}
    ]
  }
}

This results in SyntaxError: Unexpected token import when processing main.js, however.

Possible duplicate of [HTML as Webpack entry point](https://stackoverflow.com/questions/55082181/html-as-webpack-entry-point) — givanse, Mar 09 '19 at 23:22
@givanse Well, let's not mark a question from 20 months ago as duplicate of one from 4 hours ago. — P Varga, Mar 10 '19 at 02:00
@felixmosh True but I'm using a few `webpack` loaders that don't have `parcel` equivalents. — P Varga, Mar 11 '19 at 06:33
from your error message, and the partial webpack config, I guess that you don't have a `babel-loader` for modern js files. — felixmosh, Mar 11 '19 at 07:41
@felixmosh ES6 modules (`import`) are supported by `webpack` itself. — P Varga, Mar 11 '19 at 22:24

score 0 · Answer 1 · answered Apr 02 '22 at 05:37

I hava the same issue. My solution is: create empty js file as entry and you can remove that js from output path if don't need it.

Addtionally, if you use html-webpack-plugin, you can set inject to false, the html would not inject js.

new HtmlWebpackPlugin({
  template: './views/cubes.njk', // your template
  filename: 'cubes.html',
  inject: false,
})

Using webpack with a .html entry

1 Answers1

Linked