728x90
module.exports = {
name: 'wordrelay-setting', // 그냥 이름
mode: 'development', // 실 서비스에서는: production
devtool: 'eval', // 빠르게 하겠다는 의미
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: ['./client'],
}, // 입력
module: {
rules: [{
test: /\.jsx$/, // 정규표현식이다. 의미는 js랑 jsx파일에 rule을 적용하겠다.
loader: 'babel-loader', // js,jsx에 바벨을 적용해서 최신이나 실험적인 문법을 옛날브라우저에서도
// 호환되는 문법으로 바꿔주겠다는 의미
options: {
presets: ['@babel/preset-env', '@babel/preset-react'], // 아까 설치한 preset 모듈들을 주면 된다.
plugins: ['@babel/plugin-proposal-class-properties'],
},
}],
}, // @babel/preset-env등을 설치 후 이것을 추가해주는데, 이것의 역할은 "entry 라는
// 파일을 읽고 거기에 모듈을 적용한 후 output에 뺀다"는 의미이다.
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
}, // 출력
// client.jsx, WordRelay.jsx를 app.js에 합쳐줘야 하는데,
// client.jsx에서 이미 WordRelay.jsx를 불러오고 있어서 client.jsx만 불러오면 app.js에 합쳐진다.
// 📎 resolve에 확장자를 추가해주면 entry에 확장자를 적어줄
// 필요가 없이 웹팩에서 알아서 resolve에 리스트 되어있는 확장자 범위 안에서 찾아준다.
// 실행 방법: npx webpack 을 해주면 dist/app.js에 코드가 합쳐진다.
};※ module에 options에 presets의 또다른 표현법
module: {
rules: [{
...
presets: [
['@babel/preset-env', {
targets:{
🔈 browsers: ['last 2 chrome versions'], // 최신 브라우저만 지원할 수 있게 한다.
},
}],
'@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
}
}],
},
// @babel/preset-env는 자동으로 옛날브라우저들을 호환시켜주는 것인데 이것을 이렇게 조금 더 구체적으로 설정해줄 수 있다.🔈 밑에와 같은 옵션들이 들어갈 수 있다.
- > 5%: browsers versions selected by global usage statistics. >=, < and <= work too.
- > 5% in US: uses USA usage statistics. It accepts two-letter country code.
- > 5% in alt-AS: uses Asia region usage statistics. List of all region codes can be found at caniuse-lite/data/regions.
- > 5% in my stats: uses custom usage data.
- > 5% in browserslist-config-mycompany stats: uses custom usage data from browserslist-config-mycompany/browserslist-stats.json.
https://github.com/browserslist/browserslist#queries
※ 추가적으로 뭔가 하고싶은 것들이 있다면 plugins을 붙인다. (확장프로그램 개념)
module: {
rules: [{
test: /\.jsx$/,
loader: '...',
options: {
presets: ['...']
plugins: ['...'],
},
}],
},
🔈plugins: [
new webpack.LoaderOptionsPlugin({ debug: true }),
],
output: {
path: ...,
filename: '...'
},
@babel/preset-env
브라우저에 맞게 알아서 최신문법을 옛날문법으로 바꿔준다.
@babel/preset-react
js를 지원하게 해준다.
babel-loader
바벨이랑 웹팩을 연결해준다.
'프레임워크 > React' 카테고리의 다른 글
| [React] map 다른 파일로 빼기 (0) | 2021.07.22 |
|---|---|
| [React] Map 사용법 (0) | 2021.07.22 |
| [React] 라우트 파라메터 (0) | 2021.06.30 |
| [React] gravatar (0) | 2021.06.28 |
| [React] 쿠키 (0) | 2021.06.27 |
