How to setup html-webpack-plugin in laravel?

Question

JavaScript

The task is to add a hash to the files when building.
webpack config:

export default {
    entry: {
        app: './react/src/app/index',
    },
    output: {
        path: __dirname + '/public',
        publicPath: '/',
        filename: 'assets/js/[name].[contenthash].bundle.js'
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './react/src/app/index.html'
        })
    ]
};

In general, the plugin works - the publicnecessary html is generated in my folder and the actual path to the file is substituted into it

<script src="/assets/js/app.e038cfa2f592a3f951d8.bundle.js"></script>

The only problem is that Laravel doesn't use the file index.htmlfrom the public. The content is taken from resources/views/index.blade.phpwhere the path to the file is coded

<script defer src="{{ asset('assets/js/app.bundle.js') }}"></script>

- is this index.blade generated automatically based on some template, or is it created manually?
- how to add the correct path to the JS file that generates the webpack?

So far, all I've been able to google is the plugin laravel-mix, I'm smoking its documentation...

Answer 1

The problem was eventually solved by means of the framework through Laravel-mix

Answer 2

I won’t suggest a universal solution, but you have html-webpack-lugin , you can probably just rename your index.html to a .php file, insert the necessary code, and specify the path where to save it in the laravel project in additional parameters. For example in layoyts. The plugin itself will substitute the script and style files, the rest will not be touched.

new HTMLWebpackPlugin({
  template: './react/src/app/index.html'
})

Answer 3

In order not to bother with such a problem, I did the following: I added a certain hash inside the asset connection. Those. wrote like this:

<script defer src="{{ asset('assets/js/app.bundle.js') . "?" . md5(time()) }}"></script>

And then you can not pull out the html file of the bundle.