webpack 시작
cmd창에 webpack init을 통해서 package.json 설정 파일을 만들어준다.
이후 필요한 프로그램을 받아준다
npm i -D react react-dom webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
이후 프로젝트 폴더에 webpack.config.js를 생성해준다.
const path = require('path');
module.exports = {
mode : 'development',
devtool : 'eval', // 개발 시는 eval 프로덕션 시는 hidden-source-map
resolve : {
extensions : ['.jsx', 'js'],
},
entry:{
app : './client',
},
module:{
rules: [{
test : /\.jsx?$/,
loader : 'babel-loader',
options : {
presets : ['@babel/preset-env', '@babel/preset-react'],
plugins : [],
},
}],
},
output : {
filename : 'app.js',
path : path.join(__dirname, 'dist'),
},
};이 곳에는 webpack 사용을 위한 설정을 기입한다. 기본적으로 한 번 설정하면 같은 설정으로 많이 사용하니 잘 저장해놓는 것이 좋다.
이전에 사용한 구구단 코드를 이용해서 webpack 빌드용 jsx코드를 작성한다
GuGuDan.jsx
const React = require('react');
const { useState, useRef } = React;
const GuGuDan = () =>{
const [first, setFirst] = useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
const [value, setValue] = useState('');
const [result, setResult] = useState('');
const inputEl = useRef(null);
const onSubmitForm = e =>{
e.preventDefault();
if (parseInt(value) === first * second){
setResult('정답');
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
inputEl.current.focus();
}else{
setResult('땡');
setValue('');
inputEl.current.focus();
}
};
return (
<>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
<input
ref = {inputEl}
type = "number"
value = {value}
onChange = {e => setValue(e.target.value)}
/>
<button>입력</button>
</form>
<div id="result">{result}</div>
</>
);
};
module.exports = GuGuDan;client.jsx
const React = require('react');
const ReactDOM = require('react-dom');
const GuGuDan = require('./GuGuDan');
ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));이후 cmd 창에서 webpack 빌드를 진행한다.
실행
실행용 html 페이지를 작성한 뒤에 빌드한 app.js를 이식한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>이 페이지를 실행하면 웹팩 빌드한 구구단 코드가 잘 실행된다.
이 정도면 웹 팩 사용이 어느정도 익숙해진 느낌~
공부와 일상