webpackで.babelrcっているんだっけ？

他人のwebpackの設定をみてると人によっては.babelrcがあったりなかったりする。
どっちが正解なんだと思うことがあったが、別にbabelrcがあってもなくてもよい。
webpack.config.jsでbabelの設定するか、babelrcで設定するかの違いということがわかったのでとりあえずメモしておく。

今回も基本的なこと。

webpack.config.jsでbabel設定する方法

webpack.config.js

const config = {
  ... 
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: path.resolve(__dirname, 'node_modules'),
      loader: 'babel-loader',
      // ここがbabelの詳細設定
      query: {
        presets: ['react', 'env'],
        plugins: ['transform-class-properties', 'transform-decorators-legacy'],
      },
    },
  ...
};

module.exports = config;

webpack.config.jsにbabelの設定を記述してるので、.babelrcは不要。
これでたとえば、npm run buildと実行するとトライスパイルできる

babelrcでbabel設定する

webpack.config.js

const config = {
  ... 
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: path.resolve(__dirname, 'node_modules'),
      loader: 'babel-loader',
      // queryキーは書かない
    },
  ...
};

module.exports = config;

.babelrc

{
  "presets": ['react', 'env'],
  "plugins": [
    'transform-class-properties',
    'transform-decorators-legacy'
  ]
}

webpack.confi.jsでbabel設定したときのqueryキーで指定した内容をそのままjson形式で.babelrcに記述するだけでよい。 これで同じくnpm run buildによりトランスパイルできる。

それだけだよね。。。