Webpack 3搭配File-Loader无法加载视频文件求助

Hey there, let's work through why your MP4/MOV files aren't loading properly while images work fine. Here are the most common fixes to try:

1. Make Webpack "aware" of your video files #

Webpack is a module bundler—it only processes files that are explicitly imported/required in your JavaScript code. If you're just hardcoding the src in your HTML, Webpack won't pick up the video file and won't copy it to your assets/ output folder.

Fix this by importing your video in your entry JS file (e.g., index.js):

// Import the video file (adjust the path to match your project structure)
import videoPath from './path/to/video2.mp4';

// Dynamically set the source for your video element
const videoSource = document.querySelector('#video source');
videoSource.src = videoPath;

2. Tweak your file-loader configuration for predictable filenames #

By default, file-loader generates a hash for filenames to avoid caching issues. If you're referencing the original filename in your HTML, this mismatch will break the path. Add the name option to keep filenames consistent, plus a case-insensitive flag for extensions:

{
  test: /\.(jpg|png|gif|svg|mp4|mov)$/i, // The `i` flag matches uppercase extensions like .MP4/.MOV
  use: [
    {
      loader: "file-loader",
      options: {
        outputPath: "assets/",
        name: "[name].[ext]" // Preserves original filename and extension
      }
    }
  ]
}

3. Use html-webpack-plugin to auto-resolve HTML paths #

If you prefer keeping the video source in your HTML instead of setting it via JS, use html-webpack-plugin to let Webpack automatically update the src attributes with the correct output paths.

First, install the version compatible with Webpack 3:

npm install html-webpack-plugin@3 --save-dev

Then add it to your Webpack config:

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

module.exports = {
  // ... your existing entry, output, module rules
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // Path to your source HTML file
    })
  ]
};

This plugin will generate a new HTML file in your output directory with all asset paths replaced to match Webpack's output.

4. Verify the output directory #

After running webpack, check your dist/assets/ folder (or your custom output directory) to confirm the video file is being copied there. If it's missing, double-check:

• The file path in your import statement is correct
• The regex in your test rule matches the video file's extension (case-sensitive unless you added the i flag)

内容的提问来源于stack exchange，提问作者user990463