Question

问题： 当使用“ npm run”在本地运行我的React应用程序时，我得到一个没有错误日志的白页。

使用的框架/程序

反应15.6.2
NodeJs 8.11.3
webpack 1.15.0
babel 6.26.0
Git 2.18

操作系统 Windows 10

我尝试删除所有节点模块和package-lock.json，还尝试更新webpack的版本，如此处Whitescreen of death after pulling from git repo (ReactJS, Nginx)

我注意到的一件事是，当我更换组件时，虽然看不到任何东西被加载，但我得到了以下消息： “无法热更新以下模块：（需要完全重新加载）”

我尝试更新热加载器，但这也不起作用，有人知道发生了什么吗？

更新这是webpack服务器的配置：

const webpack = require('webpack');
const path = require('path');
const webpackAliases = require('./webpackAliases');
const localBasePath = path.resolve(__dirname, '../');
const { localModuleResolve, localRootResolve, resolve } = require('../../common/tools');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const {
  babelLoader,
  jsonLoader,
  urlLoader,
  svgReactLoader,
  extractStylesLoader,
  faviconLoader,
  declarityLoader,
  workerLoader
} = require('./webpackLoaders');

module.exports = (basePath, appEntry, devConfig) => {
  const routesEntry = devConfig.app.routes;
  const historyAlias = {
    'deps-history': typeof devConfig.devServer.history == 'string'
                        ? devConfig.devServer.history
                        : localRootResolve('common/defaultHistory')
  }

  const extraWebpackConfig = devConfig.webpack || {};
  const extraAliases = extraWebpackConfig.aliases || {};

  return {
    entry: [
      'babel-polyfill',
      resolve('react-hot-loader/patch'),
      resolve('webpack-hot-middleware/client'),
      localRootResolve('src/devEntry.js')
    ],
    output : {
      filename: '[name].js',
      path: extraWebpackConfig.destinationPath || path.resolve(basePath, 'lib'),
      publicPath: '/static/'
    },
    devtool: 'cheap-module-source-map',
    module: {
      rules: [
        babelLoader({
          use: {
            options: {
              plugins: require("react-hot-loader/babel")
            }
          },
          include: [
            localRootResolve('src'),
            localRootResolve('lib'),
            path.join(basePath, 'src')
          ],
        }),
        jsonLoader(),
        urlLoader(),
        svgReactLoader(),
        faviconLoader(),
        declarityLoader(),
        workerLoader()
      //  extractStylesLoader()
      ]
    },
    resolve: {
      alias: Object.assign(
        {},
        webpackAliases,
        extraAliases,
        historyAlias,
        routesEntry ? {'deps-routes': path.resolve(basePath, routesEntry)} : {}
      ),
      extensions: [".js", ".jsx", ".json", ".dsx"],
      modules: [path.resolve(basePath, 'node_modules'), path.resolve(__dirname, '../../', 'node_modules')]
    },
    externals: {
      'react/addons': 'react',
      'react/lib/ExecutionEnvironment': 'react',
      'react/lib/ReactContext': 'react',
    },
    plugins: [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.EnvironmentPlugin(['NODE_ENV', 'WORKING_DIR']),
      //new ExtractTextPlugin({ filename: '[name]-styles.css', allChunks: true }),
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: function (module) {
          // this assumes your vendor imports exist in the node_modules directory
          return module.context && module.context.indexOf("node_modules") !== -1;
        }
      }),
    ]
  }
};

Answer 1

您应该尝试使用create-react-app并使用该安装程序安装组件，然后查看它们是否起作用。它容易得多，无需太多配置即可测试您的应用程序。

npm install -g create-react-app

之后

create-react-app your-app-name

然后，您可以在没有配置webpack的情况下测试每个组件，并尝试查找错误。

Answer 2

替换热模块->每个模块就像LiveReload。

添加react-hot-loader意味着您要告诉webpack模块可以处理热重装，但实际上不做任何事情。

另一种选择是在项目中包含babel-plugin-react-transform或plugins: [ // OccurenceOrderPlugin is needed for webpack 1.x only new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), // Use NoErrorsPlugin for webpack 1.x new webpack.NoEmitOnErrorsPlugin() ]。

有一个官方中间件可以帮助您解决此问题： webpack-hot-middleware

npm install --save-dev webpack-hot-middleware

下一步，在Webpack配置中启用热重载：

将以下插件添加到插件数组：

***Add webpack-dev-middleware the usual way:***

var webpack = require('webpack');
var webpackConfig = require('./webpack.config');
var compiler = webpack(webpackConfig);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
}));
Add webpack-hot-middleware attached to the same compiler instance

app.use(require("webpack-hot-middleware")(compiler));
And you're all set!

出现确保了一致的构建哈希值，热模块替换在某种程度上是不言自明的，没有错误可用于更清晰地处理错误。

将“ webpack-hot-middleware / client”添加到条目数组中。当捆绑包重建时，它将连接到服务器以接收通知，然后相应地更新客户端捆绑包。**

现在将中间件添加到您的服务器中：

{{1}}

参考：Hot Module Replacement

Answer 3

经过大量测试，我们能够解决问题，并且它与权限有关，奇怪的是hod-loader模块无法更新任何文件，因此我们认为它必须与文件有关/文件夹权限。当我最初克隆存储库时，即使在运行Git Bash时，我也使用提升的权限来做所有事情，我们决定将存储库重新克隆到另一个文件夹中，并在没有提升权限的情况下运行gitbash，之后一切正常。请注意，我之前曾尝试过重新克隆该存储库，但由于我正在使用提升的权限进行所有操作，因此它不起作用，我不知道为什么会这样，或者是否与现有的IT策略有关，但希望这样做可以帮助别人遇到同样的问题。

反应不加载任何组件

3 个答案: