Webpack 显示空白页面，但文件显示在终端中

Question

现在有点疯狂。我已经尝试解决这个问题一个多星期了，但似乎仍然无法解决。

目前我正在尝试制作一个使用 React-Router 的 React 应用程序，但我没有使用 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.

当我加载页面时，显示了 none 个项目。我认为 html-webpack-plugin 应该注入必要的文件，但它并没有这样做。我不明白为什么 none 的必要文件被加载到我的 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。谢谢，请帮忙！！

Answer 1

看起来正在提供的只是您在 server/main.js

中配置的后备和静态处理程序

app.use(express.static(root));
app.use(fallback('index.html', { root }));

如果删除请求无限期挂起。这不是唯一必要的修复，但有望帮助您找到问题的根源。

Webpack 显示空白页面，但文件显示在终端中

Webpack is displaying empty pages, but files are being shown in terminal

reactjs

webpack

webpack-hmr

html-webpack-plugin

webpack-dev-middleware