Page 38 -

서버 사이드 렌더링을 할 때 CSS 혹은 이미지 파일은 그다지 중요하지 않습니다. 그렇다고 완
전히 무시할 수는 없습니다. 가끔 자바스크립트 내부에서 파일에 대한 경로가 필요하거나 CSS
Module처럼 로컬 className을 참조해야 할 수도 있기 때문입니다. 그래서 해당 파일을 로더에서

별도로 설정하여 처리하지만 따로 결과물에 포함되지 않도록 구현할 수 있습니다.

config/webpack.config.server.js
const paths = require('./paths');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); // CSS
Module의 고유 className을 만들 때 필요한 옵션

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

module.exports = {
mode: 'production', // 프로덕션 모드로 설정하여 최적화 옵션들을 활성화
entry: paths.ssrIndexJs, // 엔트리 경로
target: 'node', // node 환경에서 실행될 것이라는 점을 명시
output: {
path: paths.ssrBuild, // 빌드 경로
filename: 'server.js', // 파일 이름
chunkFilename: 'js/[name].chunk.js', // 청크 파일 이름,
publicPath: paths.servedPath, // 정적 파일이 제공될 경로
},
module: {
rules: [
{
oneOf: [
// 자바스크립트를 위한 처리
// 기존 webpack.config.js를 참고하여 작성
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{

548

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