Webpack、React.js - ブラウザコンソールで定義されていないエラーを要求しない

Question

私はReact.jsフロントエンドを持つWebアプリケーションを構築しようとしています。私は離れてサーバーとクライアントのためのwebpack.configファイルを別々に作成しているものを行う私の常習的な方法から移動しようとしています。私はまたminifier（Babili）を追加しようとしています。

ここに私のwebpack.configファイルがあります。 object.assignを使用して、クライアントとサーバーのファイル用に異なるオブジェクトを作成する方法と、最後にどのようにエクスポートするかに注目してください。私はこれがどこにあるのか疑問だ。

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')); 

私は、ブラウザのコンソールで取得エラーは以下の通りである：なぜそれはwouldn

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 

私は理解していない。ここ

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です仕事。 index.htmlファイルがブラウザに提供されているのが分かるので、server.jsファイルは正常に動作します。私の通常のwebpack.configファイルはBabylon 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()はrequireを使用して、すべてのモジュールをロードするためのWebPACKに指示します。これはサーバーにとっては便利ですが、このエラーはブラウザにスローされます（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() 
});