Javascript 网页包生成不呈现HTML5视频

--我有一个HTML5视频，在本地主机（开发环境）上可以正确加载

反应成分

import HomeVideo from '../video/home.mp4';
const Home = () => (
  <div className="home-container">
    <div className='video-container'>
    </div>
    <video autoPlay loop>
      <source src={HomeVideo} type='video/mp4' />
      Your browser does not support the video tag.<a href="https://youtu.be/bgSMpRpObCg" rel="noopener noreferrer" target="_blank">Watch it here</a>
    </video>
  </div>
  </div>    
)
export default Home;

• 对于产品构建，我在控制台中看到了视频（但是

  src=

  显示了网页构建url）这就是问题所在吗？

• 但视频不会加载到页面中

以下是我的webpack.config.js当前的编写方式： ps：不管有没有注释掉的行，行为都是一样的。在dev中工作，但在构建后不工作

const webpack = require('webpack');

module.exports = {
  entry: `${__dirname}/src/index.js`,
  output: {
    path: `${__dirname}/build`,
    publicPath: '/build/',
    filename: 'bundle.js',
  },


  module: {
    rules: [
      //{ test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
      //{ test: /\.(mov|mp4)$/, loader: 'url-loader?limit=10000&mimetype=video/mp4' },
      {
        test: /\.(mov|mp4)$/, use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }
        ]
      },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      {
        test: /\.css$/,
        use: ['style-loader', { loader: 'css-loader', options: { minimize: true } }],
      },
      {
        test: /\.(pdf|jpg|png|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[path][name].[hash].[ext]",
          },
        },
      },
    ]
  },

  plugins: process.argv.indexOf('-p') === -1 ? [] : [
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,
      },
    }),
  ],
};

---

**我不知道这是否重要，但这是在GitHub页面上提供的。

使用以下web包配置。（下面的取消注释行，删除

/\（mov | mp4）

请检查与之类似的问题类型

并检查更多关于和的信息

---

希望这会对你有所帮助！！

控制台中有错误吗？你检查过没有错误吗？你在main.js中导入了视频吗？你是说在

Index.js

还是

App.js

？我只从使用它的组件导入了视频，它是

Home.js

…通过直接传递url，它会在lan上返回404d、 只有先导入文件才有效。我已经添加了网页配置，请检查

const webpack = require('webpack');

module.exports = {
  entry: `${__dirname}/src/index.js`,
  output: {
    path: `${__dirname}/build`,
    publicPath: '/build/',
    filename: 'bundle.js',
  },


  module: {
    rules: [
      //{ test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
      //{ test: /\.(mov|mp4)$/, loader: 'url-loader?limit=10000&mimetype=video/mp4' },
      {
        test: /\.(mov|mp4)$/, use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }
        ]
      },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      {
        test: /\.css$/,
        use: ['style-loader', { loader: 'css-loader', options: { minimize: true } }],
      },
      {
        test: /\.(pdf|jpg|png|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[path][name].[hash].[ext]",
          },
        },
      },
    ]
  },

  plugins: process.argv.indexOf('-p') === -1 ? [] : [
    new webpack.optimize.UglifyJsPlugin({
      output: {
        comments: false,
      },
    }),
  ],
};

  { test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
  { test: /\.(mov|mp4)$/, loader: 'url-loader' },