How to connect js to html using webpack?

K

kirillleogky2020-01-06 13:52:59

JavaScript

kirillleogky, 2020-01-06 13:52:59

There is code for example:

<body>
    <h1>Hello There</h1>
    <h2>General Kenobi</h2>
    <script src="dist/main.js"></script>

When checking it, they write -

so do it wrong. All necessary files should be created together with webpack<script src="dist/main.js"></script>

Tell me how to correctly connect js files to html using webpack?
My webpack config if anything:

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

module.exports = {
  entry: {
    app: './src/screens/app/index.js',
    landing: './src/screens/landing/index.js'
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name]/main.js"
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
    },
    {
      test: /\.scss$/,
      use: [{
          loader: "style-loader"
      }, {
          loader: "css-loader"
      }, {
          loader: "sass-loader",
      }]
    },
    {
      test: /\.(jpg|png|svg|ttf|woff|eot)$/,
      loader: 'url-loader',
      options: {
       name: 'img/[name].[ext]',
      },
    }
  ],
 },
  plugins: [
   new HtmlWebpackPlugin({
     inject: true,
     chunks: ['app'],
     template: 'src/screens/app/app.html',
     filename: 'app/app.html'
   }),
   new HtmlWebpackPlugin({
     inject: true,
     chunks: ['landing'],
     template: 'src/screens/landing/landing.html',
     filename: 'landing/landing.html'
   })
 ]
};