【发布时间】：2017-12-23 00:58:47
【问题描述】：
我无法加载/播放简单的视频，所以我决定尝试查看 webpack 文件，它看起来不错。代码如下。
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
const port = parseInt(process.env.PORT, 10) || 3000;
const publicPath = `${protocol}://${host}:${port}/`;
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('webpack-dev-server/client') + `?${publicPath}`,
require.resolve('webpack/hot/dev-server'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.(html)$/,
loader: require.resolve('html-loader'),
},
{
test: /\.mp4$/,
use: [
{
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
]
},
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
target: 'node-webkit',
};
这是我的 App.js 下面。我把所有无关紧要的东西都拿出来了。这是对 mp4 文件的简单调用。
import React, { Component } from 'react';
import { curious } from '@curi/react';
import AttractLoop from '../../assets/videos/video.mp4';
class App extends Component {
render() {
return (
<div className="app-container">
<div className="attract-loop">
<video width="1080" height="1920">
<source src={ AttractLoop } type="video/mp4" />
</video>
</div>
</div>
);
}
}
export default curious(App);
这是我的代码检查器的屏幕截图：
更新 1
我什至在尝试使用来自 SO question 的代码：
<video width="1080" height="1920" autoPlay loop src={ AttractLoop } type="video/mp4" />
更新 2
我下载了示例Big Buck Bunny video 以排除我的视频编码错误。得到相同的结果，一个空白页。
【问题讨论】：
-
我的第一个猜测是放弃
static。我认为这是您的output.publicPath和output.path的一部分，所以您不需要它。然而，这完全是在黑暗中拍摄的。很难在没有看到其余设置的情况下准确地说出。如果这不是问题，您能否分享您的webpack.config.js的其余部分？ -
编辑问题以包含整个文件
-
嗯，您的配置乍一看还不错。你能帮我检查两件事吗？首先，确保在你运行 webpack 之后，mp4 文件实际输出到你的
static/media目录。其次，打开你的包（如果你在 Windows 上，我推荐 Notepad++，因为它可以很好地处理大文件）并搜索该 mp4 文件的名称。如果没有足够的信息来解决这个问题，请在此处分享该代码块。 -
我在 bundle.js 中看不到 mp4。我将它导入到我的班级，如下所示：
import carHomeToTopVideo from '../../assets/videos/_view_home_to_top.mp4';，正确的 url 显示在视频标签中，显示为localhost:3000/static/media/_view_home_to_top.mp4。如果我从检查器中获取 localhost 链接并将其直接放在浏览器中，视频就会播放。有什么想法吗？ -
我添加了调用我的视频文件的代码。我尝试在我的开发机器上注释掉所有内容，并获得了最简单的页面形式......一个应该在加载时运行的静态视频文件，我只看到视频的容器，但看不到视频。没有开发工具错误或任何警告。
标签： javascript reactjs webpack create-react-app