Webpack, React.js - 브라우저 콘솔에 정의되지 않은 오류가 필요합니다.

Question

React.js 프런트 엔드 인 익스프레스와 전체를 묶는 백팩을 처리하는 익스프레스를 구축하려고합니다. 나는 서버와 클라이언트를위한 별도의 webpack.config 파일을 만드는 일을하는 습관적 인 방식에서 벗어나려고 노력하고있다. 나는 또한 minifier (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 

내가 이해하지 못하는 이유가 같으면 ' 일하지 마라. 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를 사용하여 모든 모듈을로드 할 웹팩을 알려줍니다. 이는 서버에 유용하지만 브라우저에이 오류가 발생합니다 (require은 Node.js에만 존재하기 때문에).

// 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() 
});