0
現在部分瘋了。我一直試圖解決這個問題一個多星期，但仍然無法解決它。Webpack正在顯示空白頁面，但文件顯示在終端
目前，我試圖讓React應用程序，利用React-Router，但我不使用Redux或Flux。我從react-redux-starter-kit獲取了代碼。我已經嘗試了一下，並且一切正常，但是當我開始改變事情的時候，是在遇到問題時。
問題是，當頁面加載時沒有顯示任何東西。當我什麼也沒說時，我的意思是沒有HTML，JS或CSS。所有正在顯示的是由<header>和<body>標記組成的原始基地HTML文件。當啓動終端，我可以看到的是，文件正在由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'。 –