인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

Jason님의 프로필 이미지
Jason

작성한 질문수

웹 게임을 만들며 배우는 React

webpack build 관련 질문 드립니다.

작성

·

392

1

강의와 관련있는 질문을 남겨주세요.
• 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등)
• 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색을 해주세요. (중복 질문을 자제해주세요.)
서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등)

질문 전달에도 요령이 필요합니다.
• 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요.
• 강의실 페이지(/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다.
• 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재해주세요. 
• 수업 특정 구간에 대한 질문은 꼭 영상 타임코드를 남겨주세요!

구체적인 질문일수록 명확한 답을 받을 수 있어요.
• 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요.
• 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요.
• 정확한 질문 내용과 함께 코드를 적어주시거나, 캡쳐 이미지를 첨부하면 더욱 좋습니다.

기본적인 예의를 지켜주세요.
• 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. 
• 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. 
반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용은 스팸 처리 등 제재를 가할 수 있습니다. 

const path = require('path');
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
name: 'word-relay-setting',
mode: 'development',
devtool: 'eval',
resolve:{
extensions: ['.js','.jsx','.css'],
},
entry: {
app:['./client'],
},

module:{
rules:[{
test:/\.jsx?/,
loader: 'babel-loader',
options:{
presets:['@babel/preset-env','@babel/preset-react'],
plugins:[
'@babel/plugin-proposal-class-properties',
'react-refresh/babel',
],
},
}],
},
plugins:[
new RefreshWebpackPlugin()
],
output:{
path:path.join(__dirname,'dist'),
filename: "app.js"
},
devServer:{
publicPath: '/dist/',
hot:true,
}
};

위와 같은 webpack.cofig.js 을 가지고 npm run dev 를 하면 webpack serve --env development 가 잘 동작해서 핫로딩 까지 정상 작동을 합니다. 그런데 build 결과물인 app.js 파일을 얻고자 npx webpack을 실행하면 아래와 같은 오류가 떠서 검색을 해봤는데 쉽게 찾아지지 않아서 여쭤보게 됐습니다. 어떤 문제인지 알수있을까요?

internal/crypto/hash.js:58

    throw new ERR_INVALID_ARG_TYPE('data',

    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, TypedArray, or DataView. Received type undefined

    at Hash.update (internal/crypto/hash.js:58:11)

    at BulkUpdateDecorator.update (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\util\createHash.js:49:14)

    at NormalModule.updateHash (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\NormalModule.js:1048:8)

    at Compilation.createModuleHashes (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\Compilation.js:2619:12)

    at hooks.optimizeChunkModules.callAsync.err (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\Compilation.js:1957:11)

    at Hook.eval [as callAsync] (eval at create (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>

:6:1)

    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\Hook.js:18:14)

    at hooks.optimizeTree.callAsync.err (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\webpack\lib\Compilation.js:1917:36)

    at Hook.eval [as callAsync] (eval at create (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>

:6:1)

    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\SH\Desktop\SH\github\react_web_game\responsecheck\node_modules\tapable\lib\Hook.js:18:14)

답변 2

2

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

배포용으로 빌드할 때의 설정은 개발용 설정과는 조금 달라져야 합니다. plugin의 ReactRefreshWebpackPlugin은 개발용으로만 사용되어 배포용일 때는 제거하셔야 합니다. 'react-refresh/babel'도요.

0

Jason님의 프로필 이미지
Jason
질문자

감사합니다. 말씀하신 두 부분 주석처리하고 npx webpack 했더니 빌드 잘 되는 것 확인했습니다. 친절한 설명 감사합니다. !!

Jason님의 프로필 이미지
Jason

작성한 질문수

질문하기