частично сходят с ума прямо сейчас. Я пытаюсь решить эту проблему уже более недели, но по-прежнему не могу ее исправить.Webpack отображает пустые страницы, но файлы отображаются в терминале
В настоящее время я пытаюсь сделать React приложения, которое использует React-Router, однако я не использую Redux или Flux. Я взял код из react-redux-starter-kit. Я немного экспериментировал с ним, и все работало нормально, но когда я начал сильно меняться, это когда я сталкивался с проблемами.
Проблема заключается в том, что при загрузке страниц отображается НИЧЕГО. Когда я ничего не говорю, я имею в виду нет 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-файл. Мой WebPack конфигурации как так:
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. Если вы хотите, чтобы все файлы, которые я сейчас использую, вы можете просмотреть их here. Спасибо, пожалуйста, помогите !!
Вы ничего не видите или ничего не значит? :) Показывает ли консоль разработчика браузера что-нибудь? Есть ли там ошибки? Может быть, ваш JS-код просто зависает в браузере? – EugZol
Здравствуйте, @EugZol, на самом деле ничего страшного нет! Единственное, что есть на самом деле, это простой старый index.html. –