webpack 명령어 오류

[lar542]

E:\repositories\study\react-webgame\2.WordChain>webpack
'webpack'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

[lar542]

webpack이 명령어로 등록되어 있지 않음. package.json에 등록함.

"scripts": {
"dev": "webpack"
},

[lar542]

npx webpack 명령어 오류

E:\repositories\study\react-webgame\2.WordChain>npx webpack
Hash: 75f8af43f95a717130f9
Version: webpack 4.39.3
Time: 85ms
Built at: 2019-09-08 21:57:24
Asset Size Chunks Chunk Names
app.js 4.44 KiB app [emitted] app
Entrypoint app = app.js
[0] multi ./client 28 bytes {app} [built]
[./client.jsx] 390 bytes {app} [built] [failed] [1 error]

ERROR in ./client.jsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const WordRelay = require('./WordRelay'); //다른 jsx 파일을 불러와서 합친다.
|
ReactDom.render(, document.querySelector('#root'));
@ multi ./client app[0]

[lar542]

JSX 문법을 알아볼 수 없다. 웹 팩에도 바벨을 추가해줘야 한다.

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

@babel/core : babel의 기본적인 것
@babel/preset-env : 브라우저에 환경에 맞게 문법을 지원
@babel/preset-react : JSX 지원
babel-loader : babel과 webpack을 연결

[lar542]

4 |
5 | class WordReplay extends Component {
6 | state = {
| ^
7 |
8 | };
9 |

문법 오류 플러그인을 추가로 설치 후 webpack.config.js에 plugins로 명시해준다.

npm i -D @babel/plugin-proposal-class-properties

module: {
rules: [{
test: /.jsx?/, //js와 jsx 파일에 규칙 적용
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},
}]
},