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 minifier，当删除时没有解决问题。我希望你们能帮我解决这个问题。提前谢谢！

编辑：我想在我以前的客户端配置中添加我没有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()
});

Webpack，React.js - 要求浏览器控制台中没有定义错误

1 个答案: