Webpack doesn't load the JavaScript files

Question

I'm trying to make a simple application where I use Webpack and babel. Down below you could find the code that I've writed... Unfortunately ,launching npm run start, from the browser console does not give me any error and the file (index.js) does not work;

package.json:

  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

That's HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas</title>
  </head>
  <body>
    <div id="root" ></div>
    <script type="text/js"  src="../src/index.js" ></script>
  </body>
</html>

Babel:

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          }
        }
      ]
    ]
  }

Webpack:

// Plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    // Main
    mode: 'development',
    devtool:'inline-source-map',
    entry: './src/index.js',
    output:{
        path: path.resolve(__dirname,'./dist'),
        filename: 'main.bundle.js',
        clean:true,
    },
    // Loaders
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: 'babel-loader',
                options: {
                    "presets":['@babel/preset-env']}
                }
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            }
        ]},
    // HTML
    plugins:[new HtmlWebpackPlugin({
        filename:'main.bundle.html',
        template:path.join(__dirname,'public','index.html'),
    })],
    // Development Server 
    devServer:{
        hot:true,
        open:true,
        port:8080,
        compress:true,
        liveReload:true,
    }
  };

index.js:

alert('hello world!');
console.log('hello world!')

Mirco Bellagamba · Accepted Answer · 2022-03-20 10:06:02Z

1

You should remove the script tag (<script type="text/js" src="../src/index.js" ></script>) in your index.html since HTMLWebpackPlugin is responsible for injecting it in your HTML file. Bundling it with Webpack you are also renaming it in main.bundle.js (in your output configuration).

answered Mar 20, 2022 at 10:06

Mirco Bellagamba

1,2288 silver badges19 bronze badges

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

4 Comments

Leonardo Over a year ago

I've tried to remove the script tag, launch again npm run build and npm run start but doesn't work.... Any suggestions?

Leonardo Over a year ago

Thank you for answering, I found your answer very interesting and I learned a new thing, I solved it by adding things that I had forgotten

Phantom Watson Over a year ago

@Leonardo, what things specifically?

Leonardo Over a year ago

The question is closed

Collectives™ on Stack Overflow

Webpack doesn't load the JavaScript files

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related