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文件已提供給瀏覽器。 除Babili縮小器外，我通常的webpack.config文件完全相同，刪除時不能解決問題。 我希望你們能幫我這個忙。 先感謝您！

編輯：我想添加一個事實，我之前的客戶端配置中沒有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()
});