Page 42 -

따라서 서버를 위해 번들링할 때는 node_modules에서 불러오는 것을 제외하고 번들링하는 것
이 좋습니다. 이를 위해 webpack-node-externals라는 라이브러리를 사용해야 합니다. 이 라이
브러리를 yarn 명령어를 사용하여 설치해 주세요.

$ yarn add webpack-node-externals

다음으로 이 라이브러리를 webpack.config.server.js의 상단에 불러와서 설정에 적용합니다.

config/webpack.config.server.js
const nodeExternals = require('webpack-node-externals');
(...)

module.exports = {
(...)
resolve: {
modules: ['node_modules']
},
externals: [nodeExternals()]
};

이제 환경 설정 파일은 거의 작성했습니다. 마지막으로 환경변수를 주입하겠습니다.

config/webpack.config.server.js

const nodeExternals = require('webpack-node-externals');
const paths = require('./paths');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const webpack = require('webpack');
const getClientEnvironment = require('./env');

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

const publicUrl = paths.servedPath.slice(0, -1);
const env = getClientEnvironment(publicUrl);

module.exports = {
(...)
externals: [nodeExternals()],
plugins: [

552

리액트를 다루는 기술_개정판(본문)최종출력용.indb 552 2019-08-20 오전 11:03:33