[ProPro]Webパッケージの設定の改善

clean-webpack-plugin

V 5では、出力cleanオプションで解決できるので削除

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

terser-webpack-plugin

バージョン5はデフォルトで提供されているため削除されます.

分離prod、dev

インストールマージprod、devに分離$ npm install --save-dev webpack-merge

cssの場合:

Prodの場合はmini-css-extract-pluginを使用してcssファイルを分離します
devの場合、style-loaderを使用してcssファイルヘッダに追加します.

regeneratorRuntime is not defined

returator runtimeは定義されていないため、エラー埋め込みを追加することで解決できます.
これは、バーベルがES 6以上のコードをES 5で実行される構文に変換することができるが、ES 5には存在しないES 6メソッドやジェネレータはサポートされていないため、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/polyfillはbabel 7.4.0以降に破棄されます.
core-js/stableとrestor-runtime/runtimeを推奨します.

既存

$ npm install --save-dev -D@babel/preset-env $ npm install core-js@3core-js@3使用
@babel/prefet-envで以下の設定を行うと自動的にインポートされるので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-corejs 3をロードするため、インストールが必要です.

"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/