webpack과 babel 세팅 - boostcamp-2020/Project15-A-Client-Based-Formula-Editor GitHub Wiki

참고 링크

😄 webpack과 babel

  • react에서는 es5/es6 + jsx를 사용합니다. 그런데 어떤 브라우저는 es6를 지원하지 않습니다.
  • babel을 이용하면 es6 문법을 es5로, jsx 문법을 js로 변환되므로 브라우저 호환성을 높일 수 있습니다.

💯 webpack

  • 웹팩은 웹페이지에서 사용되는 모든 자원들(js, css, 이미지 등등)을 번들링해주는 라이브러리입니다.
  • 따라서 번들러를 이용하면, 웹페이지 로드 시 필요한 에셋들을 여러번 요청하지 않고 한번에 받아올 수 있으므로 네트워크 요청을 최소화 할 수 있습니다. image

👍 babel

  • 모던 자바스크립트 코드를 작성해도 오래된 브라우저에서 동작할 수 있게 해줍니다.

👍 babel 세팅

  • @babel/core : 바벨의 메인 패키지
  • @babel/preset-env : es6+ 코드를 이하 버전(es5)로 변환해주는 라이브러리
  • @babel/preset-react : jsx 코드를 js로 변환해주는 라이브러리
  • babel에게 설치한 라이브러리들을 사용할 것이라고 알려주기 위하여 .babelrc 설정파일을 만들고 아래와 같이 작성합니다.
스크린샷 2020-11-17 오후 9 12 44

👍 webpack 세팅

- 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
```

webpack.config.js 파일

  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(),
 ]
}
⚠️ **GitHub.com Fallback** ⚠️