Webpack 3 locates .mp4 file but video is not playa

问题:

Webpack 3 locates .mp4 file but video is not playable

Clone this project on GitHub

I've created an animation in Adobe's new Animate CC and exported it as an .mp4 file

In my webpack.config.js file, I stated that the file-loader should be used to load my .mp4 file like so:

webpack.config.js

  {
    test: /\.(mov|mp4)$/,
    use: [
      'file-loader'
    ]
  }

(You can find my webpack.config.js source code below)

So why, when I run webpack (or rather locally, webpack as an npm script)

package.json

"build:dev": "webpack --watch",

does the browser locate the .mp4 file

index.html

<video loop autoplay controls>
  <source id="arrows" src="c31...random_hash...1611.mp4" type="video/mp4">
</video>

but not play it?

Other things I've tried

• setting the video tag's src attribute in JavaScript
• placing the video file next to the index.html in the same directory
• Using a different format (.mov)

Here is my source code:

webpack.config.js

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

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-maps',
  devServer: {
    contentBase: './dist',
    port: 3033
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.scss$|\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", "sass-loader"]
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(mov|mp4)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(mov|mp4)$/,
        use: [
            'url-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/html/index.html',
      favicon: 'src/images/icon.png'
    }),
    new ExtractTextPlugin('styles.css'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ],
  resolve: {
        alias: {
            jQuery: "src/js/jquery",
            $: "src/js/jquery"
        }
    }
}

main.js

import mov from '../media/arrows.mp4';

function render_arrows() {
  var vidtag;
  vidtag = document.getElementById('arrows');
  vidtag.src = mov;
}

render_arrows();

As I mentioned earlier, you could also clone this project on GitHub.

回答1:

Specify output file name in webpack.config.js

1. View the Wepback Documentation: file-loader

2. Here is what your loader should look like:

   {
     test: /\.(mov|mp4)$/,
     use: [
       {
         loader: 'file-loader',
         options: {
           name: '[name].[ext]'
         }  
       }
     ]
   }
   

   Important!

   You must also import your videos into your main.js file like so:

   main.js

   import video_2 from '../media/video_1.mp4';
import video_1 from '../media/video_2.mov';

3. Now, in index.html (inside your src/ directory), you can set the src attribute of your video tag to a relative path that would point to your video when it loads into the dist/ directory.
   Your path should look something like this:

       <video loop autoplay controls>
         <source src="./video_1.mp4" type="video/mp4">
       </video>
   

4. Now run npm run build or npm run build:dev

You can optionally specify a path like so:

webpack.config.js

    {
      test: /\.(mov|mp4)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }  
        }
      ]
    }