반응형
preset env에 설정을 저장할 경우 다음과 같다.
module : {
rules : [{
test : /\.jsx?/,
loader : 'babel-loader', //test에 부합하는파일을 컴파일
options : {
presets: [
['@babel/preset-env', {
targets : {
browsers : ['last 2 chrome versions'], //원하는 부분만 가능 만약 옵션이 없다면 모든 브라우저를 번역하므로 느려질 수 도있다.
}
}],
'@babel/preset-react'],
exclude : ['./node_modules'],
},
}],
},browers의 옵션들은 다음 홈페이지에 있다.
https://github.com/browserslist/browserslist
browserslist/browserslist
🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - browserslist/browserslist
github.com
사용 시 로그
const path = require('path');
const webpack = require('webpack');
module.exports = {
name : 'gugu',
mode :'development',
devtool : 'eval', //production -> hidden-source-map
// ---------------------------------------위는 설정
resolve : {
extensions : ['.js', '.jsx'],
},
entry : {
app: './client',
},
module : {
rules : [{
test : /\.jsx?/,
loader : 'babel-loader', //test에 부합하는파일을 컴파일
options : {
presets: [
['@babel/preset-env', {
targets : {
browsers : ['> 5% in KR'], //원하는 부분만 가능 만약 옵션이 없다면 모든 브라우저를 번역하므로 느려질 수 도있다.
},
debug : true,
}],
'@babel/preset-react'
],
exclude : ['./node_modules'],
},
}],
},
//확장프로그램
plugins : [
new webpack.LoaderOptionsPlugin({ debug :true}),
],
output : {
path : path.join(__dirname, 'dist'),
filename : 'app.js'
},
}
input 태그를 작성할 경우 value와 onChange는 한 세트이며 그게 아니라면 defaultValue속성을 지정해주어야 한다.
<input defaultValue={this.state.value} or value={this.state.value} onChange={this.onChangeInput}
변경할 때마다 webpack 빌드하는 게 귀찮다. 해결방법
1. npm i -D react-hot-loader
2. npm i -D webpack-dev-server
package.json
"scripts": {
"dev": "webpack-dev-server --hot",
},dev-server는 webpack.config.js를 읽어서 빌드를 해주고 항상 서버로 유지를 시켜줍니다.
client.jsx를 리빌딩.
const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root')
const WordRelay = require('./WordRelay'); //webpack할때 안묶어줘도됨
const Hot = hot(WordRelay);
ReactDom.render(<Hot />, document.querySelector('#root'));webpack.config.js 작성 플러그인 추가
plugins: [
'@babel/plugin-proposal-class-properties',
'react-hot-loader/babel',
],다음과 같이 index.html변경
<!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>output:{
path : path.join(__dirname, 'dist'), //(__dirname : 현재폴더의 시스템경로)에서부터 경로를 합쳐준다.
filename : 'app.js',
publicPath : '/dist/',
},//출력publicPath라는 가상 경로를 설정해준다.
서버는 output자체를 처리하기 때문에 따로 파일 설정해줄 필요 없다.
dist폴더 삭제
webpack.config.js파일을 변경할 시에는 재시작을 해주어야 한다
npm run dev
반응형
'FrontEnd > React' 카테고리의 다른 글
| 반복문 (0) | 2020.07.18 |
|---|---|
| require, import (0) | 2020.07.18 |
| webpack (0) | 2020.07.16 |
| AppBar의 검색기능 구현 (0) | 2020.07.16 |
| AppBar 와 웹 폰트 적용 (0) | 2020.07.16 |
댓글