2023.07.03 webpack,babel 개념잡기

이무헌·2023년 7월 21일
babelwebpack
0

react

목록 보기
15/19
post-thumbnail

1.Babel에 대하여

🖥️ babel

자바스크립트 코드의 변환을 도와주는 도구
자바스크립트를 컴파일 해주는 도구

자바스크립트 문법이 진화를 꾸준히 했고
ES5 => ES6문법이 개발되고

ES6 문법이 개발 되었는데 ES5에서 개발한 것들을 모두
변환하기 힘들다.
그래서 쓰는 것이 babel 라이브러리다.

  1. 먼저 babel을 설치 받자

     npm install @babel/core @babel/cli @babel/preset -env

  2. 바벨의 환경을 구성하자⇒ .babelrc로 환경 구성이 가능하다.

    //babelrc
{
    "presets":["@babel/preset-env"]
}

    preset은 babel에 있는 수많은 플러그인을 자동으로 가져와 주는 편리한 기능이다.

    대상 환경에 어떤 구문 변환이 필요한지 세세하게 관리할 필요 없이 최신 JavaScript를 사용할 수 있게 해주는 스마트 사전 설정이다.

  3. babel을 실행하자

    // npx babel [변환할 파일명] --out-file [내보낼 경로]
npx babel app.js --out-file dist/app.js
    • 만약 변환에 성공하면 다음과 같이 나온다.
      • before
        // 화살표 함수 ES6문법
const test = (msg) => {
  const arr = [1, 2, 3];
  const arr2 = [4, 5, 6];

  const arr3 = [...arr, ...arr2];
  //   템플릿 리터럴 ES6
  console.log(...arr3, msg);
};

test('문자 ㄱㄱ')
      • after
        "use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
// 화살표 함수 ES6문법
var test = function test(msg) {
  var _console;
  var arr = [1, 2, 3];
  var arr2 = [4, 5, 6];
  var arr3 = [].concat(arr, arr2);
  //   템플릿 리터럴 ES6
  (_console = console).log.apply(_console, _toConsumableArray(arr3).concat([msg]));
};
test('문자 ㄱㄱ');

  4. 만약 require과 같은 import같은 commonJs로 바꾼다면?

    // ES6문법으로 작성
import express from "express";

const app = express();

app.listen(8080, () => {
  console.log("gogo");
});

  5. .babalrc변경

    {
    "plugins": ["@babel/plugin-transform-modules-commonjs"],

}

    키값이 plugins로 변경되었다.

  6. 결과값

    "use strict";

var _express = _interopRequireDefault(require("express"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// ES6문법으로 작성

const app = (0, _express.default)();
app.listen(8080, () => {
  console.log("gogo");
});

    모두 require로 변경되었다.

2.jsx문법을 컴파일 해보자

  1. 다음과 같이 설치를 받자

    npm install @babel/core @babel/cli
npm install @babel/preset-react

  2. .babelrc도 다음과 같이 수정해주자

    {
    "presets":["@babel/preset-react"]

}

  3. 실행시키면 다음과 같다

    • 전체코드
      • before
        class App extends React.Component {
  render() {
    return (
      <ul>
        <li>list1</li>
      </ul>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
      • after
        class App extends React.Component {
  render() {
    return /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "list1"));
  }
}
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render( /*#__PURE__*/React.createElement(App, null));

3.webpack에 대하여 알아보자

🖥️ 우린 es6를 자동으로 es5로 변환 시켜주는 babel에 대하여 알아보았다. 또한 jsx로 자동으로 js파일을 컴파일 해주니 정말 혜자다. 이번에는 여러 모듈을 하나로 bundling하여 spa를 가능하게 만들어주는 webpack에 대해 알아보자.

웹펙 속성은 다음과 같은 key값이 있다.

entry: 진입점을 지정 시작점으로 사용할 모듈을 webpack에 알려줌
output:내보내는 번들링 방법을 결정 생성한 번들링 파일의 위치,이름
loaders: 번들링 중에 모듈의 소스 코드에 적용되는 자바스크립트나 css 이미지 파일을 처리
plugins:추가 기능 사용시 번들 최적화

  1. 먼저 webpack을 설치 받자

    npm install webpack-cli webpack

  2. 프로젝트를 생성하고 webpack의 설정을 해주는 webpack.config.js를 생성하자

    module.exports = {
  // 진입점 시작점 설정
  // entry: "./20230703/webpack1/index.js",
  entry: "./20230703/webpack2/index.js",
  // 번들된 파일의 내보낼 옵션
  output: {
    filename: "bundle.js",
    // path: path.join(__dirname, "20230703", "webpack1", "dist"),
    path: path.join(__dirname, "20230703", "webpack2", "dist"),
  },
  // 모듈의 규칙 설정
  module: {
    rules: [
      {
        // test : 파일 확장자와 일치하는 정규식의 키
        // .css 확장자의 파일의 규칙을 설정
        test: /\.css$/,
        // use확장자에 맞는 파일을 처리할 때 사용할 로더를 지정
        // style-loader,css-loader를 사용할거임
        // CSS 파일을 번들링 하자
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

    이 상태에서 npx webpack을 실행이 가능하다.

  3. js코드를 번들링하면 다음과 같은 코드가 나온다.

    (()=>{var e={27:e=>{e.exports={name:"string"}}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var a=r[o]={exports:{}};return e[o](a,a.exports,t),a.exports}(()=>{const e=t(27);console.log(e.name),ReactDOM.createRoot(document.querySelector("#root")).render(React.createElement("div"))})()})();

    가로로 매우 긴 코드로 마치 min.js를 보는것 같다.

4.webpack 으로 j s,jsx번들링하기

  1. 먼저 install 받자

     npm install webpack webpack-cli css-loader style-loader

  2. html도 마찬가지로 번들링하여 자동으로 번들링 된 jsx를 받는 html을 만들자

    npm install webpack webpack-cli html-webpack-plugin

    이는 webpack.config.js에서 plugin으로 사용될 것이다.

  3. babel로 jsx파일도 변환시켜보자

    {
    presets:["@babel/preset-env","@babel/preset-react"]
}

    jsx를 js로 변환시킨다.

  4. webpack.config.js

    const HtmlWebPackPlugin = require("html-webpack-plugin");

// webpack 구성 객체 내보내기
module.exports = {
  // 개발 모드 설정 //빌드할 때 시간을 최적화 단계를 건너뛰고
  mode: "development",

  // 진입점 시작점
  entry: "./20230703/webpack3/src/index.js",
  module: {
    rules: [
      {
        // test:.js,.jsx 확장자를 가진 파일에 대한 규칙을 생성
        test: /\.(js|jsx)$/,
        // node_modules 폴더를 제외하고 파일 처리
        // exclude 제외할 폴더
        exclude: /node_modules/,
        // babel-loader를 이용해서 파일을 번들링한다.
        use: ["babel-loader"],
      },
    ],
  },
  // 플러그인 설정
  plugins: [
    // HtmlWebPackPlugin을 사용해서 index.html 번들링 폴더에 생성
    new HtmlWebPackPlugin({
      template: "./20230703/webpack3/src/index.html",
      filename: "index.html",
    }),
  ],
  // 번들링을 내보낼 속성
  output:{
    // 번들 파일 이름
    filename:'bundle.js',
    // 경로 설정
    path:path.join(__dirname,'20230703','webpack3','src','dist')
  }
};

  5. 결과⇒ index.js에서 entry가 일어났지만 index.js는 App밖에 없다.

    • before(App)
      import React from "react";

class App extends React.Component {
  render() {
    return <div>안뇽 ㅎㅎ</div>;
  }
}

export default App;
    • before(index.html)
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script></script>
</html>
    • after(App) 난잡한 코드가 되어있다.
    • after(index.html)
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
//bundle이 bundling된 App이다.(파일상으론 index.js)
  <script defer src="bundle.js"></script></head>
  <body>
    <div id="root"></div>
  </body>
  <script></script>
</html>

5.느낀점

🖥️ 평소에는 npx-create-app으로 그냥 단순하게 사용하던 babel과 webpack의 중요성과 각 키가 어떤 역할을 하는지 알게 됐다. 자동으로 설정을 해주어도 결국 언젠가 커스텀을 할 때가 오는데 그때를 대비해서 어려워도 좀 참고 각 key와 value를 익혀두는게 좋다고 생각한다.
profile
이무헌
개발당시에 직면한 이슈를 정리하는 곳
이전 포스트

2023.06.29 react로 로또추첨기 만들기

다음 포스트

2023.07.06 reactRoute,Navigate

0개의 댓글