1
로드/재생할 간단한 비디오를 가져올 수 없기 때문에 webpack 파일을 살펴보기로했습니다. 코드는 다음과 같습니다.로컬 비디오가로드되지 않습니다. 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 파일에 대한 간단한 호출입니다.
업데이트 1
심지어이 SO question에서이 코드를 사용하려고 해요 :
<video width="1080" height="1920" autoPlay loop src={ AttractLoop } type="video/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);
그리고 여기 내 코드 관리자의 스크린 샷입니다
업데이트 2
Big Buck Bunny vide o를 다운로드하여 내 비디오가 잘못 인코딩 된 것을 제외합니다. 동일한 결과를 얻으려면 빈 페이지가 필요합니다.
내 첫 번째 추측은 '정적'을 삭제하는 것입니다. 나는 그것이 당신의'output.publicPath'와'output.path'의 일부라고 가정합니다, 그래서 당신은 그것을 필요로하지 않아야합니다. 하지만 어둠 속에서 총을 맞았습니다. 나머지 설정을 보지 않고 말하기가 어렵습니다. 그게 문제가 아니라면'webpack.config.js'의 나머지 부분을 공유 할 수 있습니까? –
전체 파일을 포함하도록 질문을 수정했습니다. –
흠, 설정이 얼핏 보입니다. 나에게 두 가지를 체크 아웃 할 수 있습니까? 먼저 webpack을 실행 한 후 mp4 파일이 실제로'static/media' 디렉토리에 출력되는지 확인하십시오. 둘째, 번들을여십시오. (대용량 파일을 매우 잘 처리 할 때 윈도우에있는 경우 메모장 ++을 사용하는 것이 좋습니다) 해당 mp4 파일의 이름을 검색하십시오. 이 코드 블록을 여기에 공유하면 정보를 얻을 수있는 정보가 충분하지 않습니다. –