How to load a local video in React using webpack?
I had the same problem, my solution is:
It uses https://github.com/webpack/html-loader and https://github.com/webpack/url-loader:
The loaders configuration:
loaders: [{ test: /\.html$/, loader: 'html-loader?attrs[]=video:src' }, { test: /\.mp4$/, loader: 'url?limit=10000&mimetype=video/mp4' }]And in html:
A simple video tag, remeber webpack uses path referenced to the html file.
<video src="../../../assets/videos/cover1.mp4"></video>This works for me.
Although this is an old post, and the question is specifically about WebPack...
If you're using Typescript and a boilerplate such as create-react-app, and if you have your video on the static folder, then please check out this solution, of adding the type to src/react-app-env.d.ts, before ejecting your app: