리액트를 하기 위한 webpack 세팅
- CRA만 쓰지말고 직접 세팅해보자!
npm 사용준비
- 프로젝트 폴더 열고 npm init
리액트 설치
- npm i react react-dom
웹팩 설치(-D: 개발에만 쓰이는것)
- npm i -D webpack webpack-cli
react문법을 위한 babel 설치
- npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
- babel-loader : 바벨과 웹팩을 연결
- @babel/core : 바벨 기본적인 파일
- @babel/preset-env : 브라우저에 맞게 최신문법을 예전문법으로 변환
- @babel/preset-react : jsx등 react 문법을 쓰기 위함
- @babel/plugin-proposal-class-properties : state = {} 같은 class 최신 문법 쓰기위함
webpack.config 적용 순서
- entry에 있는 파일을 읽고, module 적용한후 output에 뺀다
webpack.config.js
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실서비스 production
devtool: 'eval', // 소스맵, 로그, 디버깅, 번들 처리를 어떻게 할 것인지
resolve: {
extensions: ['.js', '.jsx'] // 여기서 생략해도 되는 확장자 등록
},
entry: {
app: ['./client'],
}, // 입력
module: {
rules: [{
test: /\.jsx?/, // js와 jsx
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},
}],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}, // 출력
devServer: {
// writeToDisk: true // true로 하면 app.js 파일 실제로 생성
}
}webpack 명령어 실행하는 방법 2가지
-
npx webpack
-
package.json의 script에 등록해서 npm run 등록한 이름으로 실행
// package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack" },
나머지 파일들을 만들고 웹팩 실행
- entry에 적혀있는 파일(client)에서 의존성 맺고있는(import, require)것들을 찾아 변환&번들링해줌
- dist폴더에 app.js파일로 번들링 되서 생성됨
- html에서 번들링된 하나의 자바스크립트 파일만 읽게해서 최적화하는 원리
index.html
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>client.jsx
import React from 'react';
import ReactDom from 'react-dom';
import WordRelay from './WordRelay';
ReactDom.render(<WordRelay />, document.querySelector('#root'));WordRelay.jsx
const React = require('react');
const { Component } = React;
class WordRelay extends Component {
state = {
text: 'Hello webpack',
}
render() {
return <h1>{this.state.text}</h1>
}
}
module.exports = WordRelay;jsx를 못읽어서 나는 에러 => babel 필요
빌드 성공화면
웹팩2 자세히 설명해놓은 블로그
'Frontend > Webpack&Vite' 카테고리의 다른 글
| vite + typescript 절대경로 설정 (0) | 2023.02.19 |
|---|---|
| Error: Cannot find module 'webpack-cli/bin/config-yargs' (2) | 2020.11.20 |
| 전역 경로 관리 (0) | 2020.05.27 |
| [webpack] webpack.config, react-hot-loader (0) | 2019.12.11 |
