Webpack，React.js - 在浏览器控制台中不需要定义错误

Question

我正在尝试使用 React.js 前端构建一个 Web 应用程序，Express 处理后端，Webpack 捆绑整个事情。我正在尝试摆脱为服务器和客户端创建单独的 webpack.config 文件的习惯方式。我也在尝试添加一个缩小器（Babili）。

这是我的 webpack.config 文件。请注意我如何使用 object.assign 为我的客户端和服务器文件创建不同的对象，以及我如何在最后导出它们。我怀疑这就是问题所在。

const BabiliPlugin = require('babili-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const srcPath = path.resolve(__dirname + '/src');
const distPath = path.resolve(__dirname + '/dist');

// Common entries for all configs
var common = Object.assign({}, {
  context: srcPath,
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['*']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new BabiliPlugin()
  ],
  externals: nodeExternals()
});

// Server.js config
// Output to dist/client/
var serverConfig = Object.assign({}, common, {
  entry: './server/index.js',
  output: {
    path: distPath,
    filename: 'server.min.js'
  },
  target: 'node',
  node: {
    __dirname: false,
    __filename: false
  }
});

// Client.js config
// Output to /dist/
var clientConfig = Object.assign({}, common, {
  entry: "./client/index.js",
  output: {
    path: distPath,
    filename: './client/client.min.js',
    publicPath: '/'
  },
  target: 'web',
  devtool: 'source-map'
});

// Export configurations array
module.exports = [serverConfig, clientConfig]

这是我的 client.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router-dom';

import Home from './routes/Home.js';

ReactDOM.render((
  <div>
    <p> why is this not working </p>
  </div>
), document.getElementById('app'));

我在浏览器控制台中得到的错误如下：

Uncaught ReferenceError: require is not defined
at Object.<anonymous> (client.min.js:1)
at b (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at b (client.min.js:1)
at client.min.js:1
at client.min.js:1

我不明白为什么它不起作用。 server.js 文件工作正常，因为我可以看到 index.html 文件已提供给浏览器。我通常使用的 webpack.config 文件与 Babili 压缩器完全相同，但删除它并不能解决问题。我希望你们能帮助我解决这个问题。提前谢谢！

编辑：我想补充一点，我之前的客户端配置中没有 nodeExternals() 部分。但是，当我不包含它时，会出现以下错误：

Uncaught Error: Cannot find module "object-assign"
at client.min.js:8
at client.min.js:8
at Object.<anonymous> (client.min.js:8)
at Object.<anonymous> (client.min.js:8)
at t (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at t (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at t (client.min.js:1)

Answer 1

externals: nodeExternals () 告诉 Webpack 使用 require 加载所有模块。这对服务器很有用，但会在浏览器中引发此错误（因为 require 仅在 Node.js 上原生存在）。

要修复它，只需将 externals 字段移动到服务器配置：

// Common entries for all configs
var common = Object.assign({}, {
  context: srcPath,
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['*']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new BabiliPlugin()
  ]
});

// Server.js config
// Output to dist/client/
var serverConfig = Object.assign({}, common, {
  entry: './server/index.js',
  output: {
    path: distPath,
    filename: 'server.min.js'
  },
  target: 'node',
  node: {
    __dirname: false,
    __filename: false
  },
  externals: nodeExternals()
});