Webpack+Babelでbabel.config.jsを使う

1. はじめに

こんばんは。Webを勉強している学生のTakuyaHanadaです。

Webpack + BabelでPoryfillを設定しようと思ったときに、babel.config.jsを作成してもうまくいかず、ネットで調べても有力な情報がなかったため、記事にします。

間違いなどありましたら、教えていただけると勉強になります。

2. 環境

• Node v12.14.1
• Webpack v4.41.5
• Babel v7.8.3

3. つまずいた点

Webpackを使うとき、babel.config.jsを使えない。

実際は使えました。

ネットで色々調べてみたのですが、有力な情報がありませんでした。（ここに載ってるよとかありましたら、教えて下さい！）

そこで、ドキュメントなどを見ていろいろ試したところ、Webpackの設定ファイルwebpack.config.jsの中にBabelの設定を書いていると、babel.config.jsは使われないことがわかりました。

なので、optionsの部分をBabelの設定ファイルbabel.config.jsに移すとうまくいきました。

webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          // ↓ここの部分を削除して、babel.config.jsに移す
          // options: {
          //   presets: [
          //     [
          //       '@babel/preset-env',
          //       {
          //         useBuiltIns: 'usage',
          //         corejs: 3
          //       }
          //     ]
          //   ]
          // }
        }
      }
    ]
  }
}

4. おわりに

なんとか動くようになってよかったです。

もっと良い方法があるよって方は教えていただけると助かります！

卒論やんなきゃ、、、