Array.fromなど、一定のブラウザで動かない関数をサクッとwebpackでトランスパイルする

ちょっとしたjsを作って他所に提供する必要がある時って……まぁ、無くはないですよね。
そんな時、各種ブラウザ対応とか、polyfilしてしまうと提供先で中途半端に独自に実装していたりして機能がぶつかったらどうしようとか、考えなくてもいい心配があるので変換するものじゃないといけないなとか、色々とめんどくさいんですよッ！

こんなことで毎回頭を使っていられないので、備忘録もかねてサクッと実行できるwebpackを用意してみました。次からはこの記事をコピろう。

制作物ッ！

トランスパイルしたいソースッ！

index.js

const foo = () => {
  console.log(Array.from([1, 2, 3]));
};

foo();

とってもシンプルです！

webpackによるトランスパイルの設定ッ！

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [
  {
    entry: {
      app: [
        './src/index.js',
      ],
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules\/.*/,
          loader: 'babel-loader',
          query: {
            'presets': [
              '@babel/preset-env'
            ],
            'plugins': [
              [
                '@babel/plugin-transform-runtime',
                {
                  'corejs': 2,
                  'helpers': true,
                  'regenerator': true,
                  'useESModules': false
                }
              ]
            ],
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: `${__dirname}/src/index.html`,
        hash: true,
      }),
    ],
  },
];

いざ実行ッ！

# developmentとしてjsを生成
yarn build

# productionとしてjsを生成　jsがminify化されたりする
yarn build:production