[Webpack] propro의 웹팩 설정 개선

propro 프로젝트의 웹팩 설정 개선 내용

clean-webpack-plugin

v5에서는 output clean 옵션으로 해결가능하기때문에 제거

output: {
  path: path.resolve('./dist'),
  publicPath: '/',
  filename: '[name].[chunkhash].js',
  clean: true,
},

terser-webpack-plugin

v5에서는 기본적으로 제공해주기 때문에 제거

prod, dev 분리

prod, dev로 분리하기 위한 merge 설치

$ npm install --save-dev webpack-merge

css의 경우에는

prod일 경우 css 파일 분리를 위한 mini-css-extract-plugin 사용
dev일 경우 css 파일 header에 추가하기 위한 style-loader 사용

regeneratorRuntime is not defined

regeneratorRuntime가 정의되어있지않기 떄문에 발생한 에러로 polyfill를 추가하여 해결하면 된다.

이는 바벨이 ES6 이상의 코드를 ES5에서 동작될수있도록 문법적으로 변환해주긴 하지만 ES5에 존재하지 않는 ES6의 메서드나 생성자들까지 지원해주지않기 때문에 polyfill이 필요하다.

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

babel 7.4.0이후부터 @babel/polyfill이 deprecated 되고
core-js/stable와 regenerator-runtime/runtime을 사용하는 방식을 제안하고 있다.

기존

$ npm install --save-dev -D@babel/preset-env

$ npm install core-js@3

core-js@3 사용

@babel/preset-env에서 아래와 같이 설정해주면 자동으로 import가 되기떄문에 core-js 설치가 필요

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs":3
      }
    ]
  ]
}

변경전

var sym = Symbol();
var promise = Promise.resolve();
var check = arr.includes("yeah!");
console.log(arr[Symbol.iterator]());

변경후

"use strict";

require("core-js/modules/es.symbol.js");

require("core-js/modules/es.symbol.description.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/es.array.includes.js");

require("core-js/modules/es.string.includes.js");

require("core-js/modules/es.symbol.iterator.js");

require("core-js/modules/es.array.iterator.js");

require("core-js/modules/es.string.iterator.js");

require("core-js/modules/web.dom-collections.iterator.js");

var sym = Symbol();
var promise = Promise.resolve();
var check = arr.includes("yeah!");
console.log(arr[Symbol.iterator]());

하지만 위 방법은 전역 스코프를 오염시키는 문제가 있다고 한다.

그래서 전역 스코프를 오염시키지 않는 방식으로 사용하려고 한다.

변경한 방식

$ npm install --save-dev @babel/plugin-transform-runtime

$ npm install @babel/runtime-corejs3

{
  "presets": [
    [
      "@babel/preset-env",
    ]
  ],
  "plugins": [["@babel/plugin-transform-runtime",{"corejs":3}]]
}

변경전

var sym = Symbol();
var promise = Promise.resolve();
var check = arr.includes("yeah!");
console.log(arr[Symbol.iterator]());

변경후

@babel/runtime-corejs3을 불러오기 때문에 설치가 필요하다.

"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));

var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));

var _getIterator2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/get-iterator"));

var sym = (0, _symbol["default"])();

var promise = _promise["default"].resolve();

var check = (0, _includes["default"])(arr).call(arr, "yeah!");
console.log((0, _getIterator2["default"])(arr));

---

Reference

• https://tech.kakao.com/2020/12/01/frontend-growth-02/