Webpack отображает пустые страницы, но файлы отображаются в терминале
Частично схожу с ума прямо сейчас. Я пытался решить эту проблему в течение недели, но все еще не могу ее решить.
В настоящее время я пытаюсь сделать React приложение, которое использует React-RouterОднако я не использую Redux или же Flux, Я взял код из комплекта реактивного-редукционного стартера. Я немного поэкспериментировал с этим, и все работало нормально, но когда я начал сильно что-то менять, это когда я столкнулся с проблемами.
Проблема в том, что при загрузке страниц НИЧЕГО не отображается. Когда я ничего не говорю, я имею в виду нет HTML, JS, или же CSS, Все, что отображается, это оригинальная база HTML файл, который состоит из <header> а также <body> тег. При запуске терминала я вижу, что файлы загружаются webpackвот как это выглядит:
Server is now running at http://192.168.0.9:3000.
webpack built 928ca955f4efc3417ea7 in 11490ms
Hash: 928ca955f4efc3417ea7
Version: webpack 1.13.2
Time: 11490ms
Asset Size Chunks Chunk Names
2abdf22181eb309fd513564971a12163.png 70.2 kB [emitted]
148e6bc6eabab75f3e18eddc2d99a10f.png 34 kB [emitted]
app.928ca955f4efc3417ea7.js 1.04 MB 0 [emitted] app
1.charities.928ca955f4efc3417ea7.js 2.31 kB 1 [emitted] charities
vendor.928ca955f4efc3417ea7.js 405 kB 2 [emitted] vendor
app.928ca955f4efc3417ea7.js.map 1.29 MB 0 [emitted] app
1.charities.928ca955f4efc3417ea7.js.map 3.53 kB 1 [emitted] charities
vendor.928ca955f4efc3417ea7.js.map 487 kB 2 [emitted] vendor
favicon.ico 30.9 kB [emitted]
index.html 491 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 565 kB 0
webpack: bundle is now VALID.
Когда я загружаю страницу, ни один из этих элементов не отображается. я думал html-webpack-plugin предполагалось ввести нужные файлы, но это не так. Я не могу понять, почему ни один из необходимых файлов не загружается в мой HTML-файл. Мой конфиг веб-пакета выглядит так:
import webpack from 'webpack'
import cssnano from 'cssnano'
import postcssNested from 'postcss-nested'
import postcssSimpleVars from 'postcss-simple-vars'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import config from '../config'
const paths = config.utils_paths
const {__PROD__} = config.globals
const webpackConfig = {
name: 'client',
target: 'web',
devtool: config.compiler_devtool,
resolve: {
root: paths.client(),
extensions: ['', '.js', '.json']
},
module: {}
}
const APP_ENTRY_PATHS = [
'babel-polyfill',
paths.client('main.js'),
`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`
]
webpackConfig.entry = {
app: APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}
webpackConfig.output = {
filename: `[name].[${config.compiler_hash_type}].js`,
path: paths.dist(),
publicPath: config.compiler_public_path
}
webpackConfig.plugins = [
new webpack.DefinePlugin(config.globals),
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('static/favicon.ico'),
filename: 'index.html',
inject: 'body',
minify: {
collapseWhitespace: true
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
]
if (__PROD__) {
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false
}
})
)
}
webpackConfig.module.loaders = [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-1']
}
},
{
test: /\.json$/,
loader: 'json'
}
]
const BASE_CSS_LOADER = 'css?sourceMap&-minimize'
const cssModulesRegex = new RegExp(
`(${paths.client().replace(/[\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]/g, '\\$&')})`
)
const cssModulesLoader = [
BASE_CSS_LOADER,
'modules',
'importLoaders=1',
'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&')
webpackConfig.module.loaders.push({
test: /\.css$/,
include: cssModulesRegex,
loaders: [
'style',
cssModulesLoader,
'postcss'
]
})
webpackConfig.module.loaders.push({
test: /\.css$/,
exclude: cssModulesRegex,
loaders: [
'style',
BASE_CSS_LOADER,
'postcss'
]
})
webpackConfig.postcss = [
cssnano({
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
}),
postcssNested(),
postcssSimpleVars({
variables: function () {
return require(paths.client('styles/variables'));
}
})
]
webpackConfig.module.loaders.push(
{ test: /\.woff(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
{ test: /\.woff2(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
{ test: /\.otf(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
{ test: /\.ttf(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
{ test: /\.svg(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
{ test: /\.(png|jpg)$/, loader: 'url?limit=8192' }
)
export default webpackConfig
Пожалуйста, помогите мне понять, почему мой index.html не вводится ЛЮБОЙ из необходимых файлов. Все, что отображается, является оригиналом index.html, Если вам нужны все файлы, которые я сейчас использую, вы можете просмотреть их здесь. Спасибо, пожалуйста, помогите!
1 ответ
Похоже, все, что обслуживается, - это резервные и статические обработчики, которые вы настроили в server/main.js
app.use(express.static(root));
app.use(fallback('index.html', { root }));
Если вы удалите этот запрос зависает на неопределенное время. Это не единственное необходимое решение, но, надеюсь, оно поможет вам понять причину проблемы.