HtmlWebpackPlugin – html create on dist but js link doesnt work

  html-webpack-plugin, javascript, plugins, webpack

I need your help.

I’am learning to use Webpack since few days and I’m stuck on a problem I think easy to fix.

Everything was working well until I did this :

npm i -D html-webpack-plugin

Then

plugins: [new HtmlWebpackPlugin({template: "./src/client/index.html, filename = "./index.html})]

When I use the npm run build command line the index.html is created on the dist folder. In this dist folder I also have the main.js. On this HTML file I do have the script src to access the js file but the problem is that is doesn’t work and the script file is quite strange… here is the script link added on the index.html file created in the dist folder :

<script defer src="main.js"></script>

Since all this step nothing work anymore when I deleted the script link on the original index.html file.

Hope I am clear.

And thanks for your help.

here is the webpack.config.js :

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path")
const webpack = require("webpack")
module.exports = {
    entry: "./src/index.js",
    mode: "none",
    module: {
        rules: [
            {
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",
            filename: "index.html",
        })
    ]
}

here is the index.html created on the dist folder :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
<script defer src="main.js"></script></head>
<body>

</body>
</html>

Here is the index.html I have created initially :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../dist/main.js"></script>
</head>
<body>

</body>
</html>

Source: Ask Javascript Questions

LEAVE A COMMENT