Load video mp4 webpack loader

Question

How to use loader for mp4 video format with webpcak 4, I try like this:

       {
            test: /\.mp4$/,
            use: 'file-loader',
            loader: 'file-loader?name=videos/[name].[ext]',
        },

and import like this

import pressButtonAnimated from './images/pressButtonAnimated.mp4'

But it does not work for me, and I get an error You may need an appropriate loader to handle this file type.

But this one is work for me, but I don wanna add in each file

import pressButtonAnimated from '-!file-loader!./images/pressButtonAnimated.mp4'

Lacielacing

Answer 1

The way how you declare your loader is not right. You are mixing two ways to define loaders.

 {
        test: /\.mp4$/,
        use: 'file-loader?name=videos/[name].[ext]',
 },

Could you try this please.

Link: https://webpack.js.org/concepts/loaders/

Mcconnell

Answer 2

with Webpack5, the attributes property has been replaced with sources

We can use file-loader like this so we can give it the option name and path.

{
    test: /\.mp4$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
                outputPath: "video"
            }
        }
    ]
}

also for some reason if you write a video tag in your html

<video class="">
    <source src="video/video.mp4" type="video/mp4">
</video>

It doesn't load in webpack but we can use html-loader as follow

{
    test: /\.html$/,
    exclude: /node_modules/,
    use: [
        {
            loader: "html-loader",
            options: {
                sources: {
                    list: [
                        {
                            tag: "source",
                            attribute: "src",
                            type: "src"
                        }
                    ]
                }
            }
        }
    ]
}

also we can use url-loader but it only load the images and videos added through css.

PS: if you found a solution for html tags with src attribute to use it with file-loader it would be great.

Riggle