-
Notifications
You must be signed in to change notification settings - Fork 9
webpack과 babel 세팅
Jin edited this page Nov 17, 2020
·
1 revision
- react에서는 es5/es6 + jsx를 사용합니다. 그런데 어떤 브라우저는 es6를 지원하지 않습니다.
- babel을 이용하면 es6 문법을 es5로, jsx 문법을 js로 변환되므로 브라우저 호환성을 높일 수 있습니다.
- 웹팩은 웹페이지에서 사용되는 모든 자원들(js, css, 이미지 등등)을 번들링해주는 라이브러리입니다.
- 따라서 번들러를 이용하면, 웹페이지 로드 시 필요한 에셋들을 여러번 요청하지 않고 한번에 받아올 수 있으므로 네트워크 요청을 최소화 할 수 있습니다.
- 모던 자바스크립트 코드를 작성해도 오래된 브라우저에서 동작할 수 있게 해줍니다.
- @babel/core : 바벨의 메인 패키지
- @babel/preset-env : es6+ 코드를 이하 버전(es5)로 변환해주는 라이브러리
- @babel/preset-react : jsx 코드를 js로 변환해주는 라이브러리
- babel에게 설치한 라이브러리들을 사용할 것이라고 알려주기 위하여 .babelrc 설정파일을 만들고 아래와 같이 작성합니다.
- webpack : 웹팩의 코어
- webpack-cli : 웹팩을 커맨드라인에서 사용
- webpack-dev-server : 실시간 개발 서버 환경을 구동할 수 있게 해줌
- 웹팩은 loader를 사용하여 다른 확장자를 가진 다양한 종류의 파일들을 번들링한다.
- style-loader : 변환된 css 파일을 <style> 태그로 감싸서 삽입
- css-loader : css 파일을 자바스크립트가 이해할 수 있도록 변환
- babel-loader : jsx, es6+ 문법을 트랜스파일링
```
npm install html-webpack-plugin clean-webpack-plugin
```
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry : "./src/index.js",
mode : "development",
module:{
rules:[
{
test:/\\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options:{presets:["@babel/env"]}
},
{
test:/\\.css$/,
use:["style-loader", "css-loader"]
}
]
},
resolve:{
extensions: ["*", ".js", ".jsx"],
alias:{
utils:path.resolve(__dirname, 'src/utils/'),
'@':path.resolve(__dirname, 'src/')
}
},
output:{
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer:{
// 정적 파일 경로
contentBase : path.join(__dirname, "public/"),
port:8000,
publicPath: "http://localhost:8000/dist/",
hotOnly: true
},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template:'./public/index.html'
}),
new CleanWebpackPlugin(),
]
}
- MathML Getting Started
- LaTex와 MathML
- webpack과 babel설정
- webpack bundle파일 줄이기
- react-mathquill 정리
- redux setting 및 공부
- Localstorage 사용법
- Drag and drop 사용법
😄데일리 스크럼
- 11월 17일 화요일 스크럼
- 11월 18일 수요일 스크럼
- 11월 19일 목요일 스크럼
- 11얼 20일 금요일 스크럼
- 11얼 23일 월요일 스크럼
- 11월 24일 화요일 스크럼
- 11월 25일 수요일 스크럼
- 11월 26일 목요일 스크럼
- 11월 27일 금요일 스크럼
- 11월 30일 월요일 스크럼
- 12월 1일 화요일 스크럼
- 12월 2일 수요일 스크럼
- 12월 3일 목요일 스크럼
- 12월 4일 금요일 스크럼
- 12월 7일 월요일 스크럼
- 12월 8일 화요일 스크럼
- 12월 9일 수요일 스크럼
- 12월 10일 목요일 스크럼
- 12월 14일 월요일 스크럼
- 12월 15일 화요일 스크럼
- 12월 16일 수요일 스크럼
- 12월 17일 목요일 스크럼
- 12월 18일 금요일 스크럼