webpack4とbabelだけのプロジェクトのwebpack.config.jsを置いておきます

最近Nuxt.jsを使った自由帳みたいなGitHubリポジトリにコミットしてたんですが、Nuxt.jsのプロジェクトにbabelを導入できる気がしなかったので(情弱)、純粋にwebpackとbabelだけを使ったプロジェクトを作って動かしてみました。

webpackは前の会社で使ったことがあったんですが、その時webpack.config.jsでハマりまくって、今回ももちろんはまりました。似たような人きっといると思うので貼っておきます。

ちなみに

  • path:絶対パスを定義しています。configファイル内は相対パスを書きたかったので定義しました。
  • entry:エントリーポイントの設定。エントリーポイントはモジュール間の依存関係の解析を開始する地点のことです。javaでいうとmainメソッドがあるクラスのファイル名を定義します。
  • output:トランスパイルしたファイルを吐き出すディレクトリを定義します。filenameは、トランスパイル後のファイル名です。[name]ってやるとトランスパイル前のファイル名と同じになります。
  • moduleのrules:babelを使うよって定義します。
  • moduleのrulesのexclude:ローダーの処理対象から外すディレクトリを指定します。
  • resolveのextension:ビルド対象のファイルの拡張子を設定します。
  • mode:developmemtやproductionと設定でき、それぞれを設定することで利用できる機能があったりします。

webpack.config.js

const path = require('path');

module.exports = {
    entry:{
        'application':'./source/es2015/application'
    },
    output:{
        path:path.join(__dirname, '/distribution/javascript'),
        filename:'[name].js'
    },
    module: {
        rules: [
          {
            test:/¥.js/,
            exclude:/node_modules/,
            use: 'babel'
          },
        ]
      },
      resolve: {
        extensions: ['.js'],
      },
    mode:'development',
};

.babelrc

{
    "presets":["es2015"]
}

参考にした記事

webpack+babel環境でフロントエンドもES6開発を参考にして進めたものの、webpackのバージョン4を使用していたためwebpack.config.js内の記法が異なったため、webpack4に更新した時にこけた所まとめ【意訳】Webpackの混乱ポイントを参考にしてwebpack.config.jsの修正や.babelrcの追加を行いました。