Comments (2)
cra가 업데이트 되어서 코드가 바뀌었다고 공지를 올리셨어요.
config/webpack.config.server.js
const nodeExternals = require("webpack-node-externals");
const paths = require("./paths");
const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
const getClientEnvironment = require("./env");
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
module.exports = {
mode: "production",
entry: paths.ssrIndexJs,
target: "node",
output: {
path: paths.ssrBuild,
filename: "server.js",
chunkFilename: "js/[name].chunk.js",
publicPath: paths.publicUrlOrPath,
},
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"),
presets: [
[
require.resolve("babel-preset-react-app"),
{
runtime: "automatic",
},
],
],
plugins: [
[
require.resolve("babel-plugin-named-asset-import"),
{
loaderMap: {
svg: {
ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]",
},
},
},
],
],
cacheDirectory: true,
cacheCompression: false,
compact: false,
},
},
// CSS 를 위한 처리
{
test: cssRegex,
exclude: cssModuleRegex,
// exportOnlyLocals: true 옵션을 설정해야 실제 css 파일을 생성하지 않습니다.
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
modules: {
exportOnlyLocals: true,
},
},
},
// CSS Module 을 위한 처리
{
test: cssModuleRegex,
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
modules: {
exportOnlyLocals: true,
getLocalIdent: getCSSModuleLocalIdent,
},
},
},
// Sass 를 위한 처리
{
test: sassRegex,
exclude: sassModuleRegex,
use: [
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 3,
modules: {
exportOnlyLocals: true,
},
},
},
require.resolve("sass-loader"),
],
},
// Sass + CSS Module 을 위한 처리
{
test: sassRegex,
exclude: sassModuleRegex,
use: [
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 3,
modules: {
exportOnlyLocals: true,
getLocalIdent: getCSSModuleLocalIdent,
},
},
},
require.resolve("sass-loader"),
],
},
// url-loader 를 위한 설정
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
emitFile: false, // 파일을 따로 저장하지 않는 옵션
limit: 10000, // 원래는 9.76KB가 넘어가면 파일로 저장하는데
// emitFile 값이 false 일땐 경로만 준비하고 파일은 저장하지 않습니다.
name: "static/media/[name].[hash:8].[ext]",
},
},
// 위에서 설정된 확장자를 제외한 파일들은
// file-loader 를 사용합니다.
{
loader: require.resolve("file-loader"),
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
emitFile: false, // 파일을 따로 저장하지 않는 옵션
name: "static/media/[name].[hash:8].[ext]",
},
},
],
},
],
},
resolve: {
modules: ["node_modules"],
},
externals: [
nodeExternals({
allowlist: [/@babel/],
}),
],
};
from learning-react.
@lhk3337 아~ 웹팩 설정때문이었군요. 타이핑 귀찮아서 책에 있는 소스코드를 붙복했더니 ㄷㄷ 알려주셔서 고맙습니다^^
from learning-react.
Related Issues (20)
- 24.3 헤더 컴포넌트 만들기 중 withRouter 내용 수정해주셨으면 좋겠습니다! HOT 1
- 25 quill 이슈 HOT 1
- 23.6 자바스크립트 문법 문의
- 20.3.4 Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
- 25.3.3 질문 HOT 1
- [9.4] styled-components에서 colon expected HOT 1
- p. 72~73 className을 사용하는 방법에 대한 질문입니다.
- 개정판> 24장) <Route path="/@:username"> HOT 3
- 20.4 데이터 로딩 에서 token'<' 에러 발생
- 20.5 hydrate 적용 시 에러 발생 문의드립니다.
- 24장 회원가입시 문제가 생길경우 하나의 solution
- node_modules 오류? HOT 2
- [개정판] 데이터 베이스 연결 에러 HOT 1
- Ch27.1.2 수정버튼클릭시 글쓰기 페이지로 이동 - 에디터에 제목, 태그가 나타나지 않습니다
- Chapter 22 이후 mongoose import 이슈
- Chapter 24 /@:username 이슈
- 20.4.3 UsersContainer.js 코드 중 오탈자 문의
- Chapter20 - ServerSideRendering with redux-saga
- 개정판 p104에서 3.4.1 오류가 납니다. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from learning-react.