JavaScript webpack+babel windows環境設定

はじめに

webpack + babel 環境をwindowsで作りました。

元にしたのはこちらの記事です。

webpack+babel環境でフロントエンドもES6開発 - Qiita
元記事では、mac環境だったようなので、少し変更することでwindows環境で動かせました。

フォルダ構成

これにしたがって、フォルダを作成して、ファイルを配置していきます。
ファイルは webpack.config.js の修正以外は、元記事の通りです。

  sample (フォルダ)
    source (フォルダ)
      es2015 (フォルダ)
        application.js
        person.js
    distribution (フォルダ)
      index.html
      javascript (フォルダ)
    package.json
    webpack.config.js
    node_modules (フォルダ)

インストール

webpack + babel のインストール方法は元記事の通りで、次のコマンドを使います。
少しオプションを変えました。

 > npm init -y
 > npm install --save webpack babel-core babel-loader babel-preset-react babel-preset-es2015

webpack.config.js のloader部分に変更が必要なようでした。
パスを通してないからかもしれません。

webpack.config.js

module.exports = {
  context: __dirname + '/source',
  entry: {
    'application': './es2015/application',
  },
  output: {
    path: __dirname + '/distribution/javascript',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        //loader: "babel", //エラーになる
        loader: "babel-loader",	//こちらはうまくいく
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

webpack.config.js が loader: "babel"のままだと、次のエラーがでました。

> .\node_modules\.bin\webpack

Hash: xxxx
Version: webpack 3.8.1
Time: 35ms

ERROR in Entry module not found: Error: Can't resolve 'babel' in 'xxx/sample/source'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'babel-loader' instead of 'babel',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

ディレクトリ作成

sampleフォルダから、次のコマンドでフォルダが作れます。macとはオプション指定が違うみたいです。
コマンドじゃなくてGUIで作成しても問題ないです。

cmd.exe

> mkdir source\es2015 distribution\javascript

コンパイル(トランスパイル)を行う

macのような、｀npm bin｀/webpack は動かないので、次のようにします。

cmd.exe

> .\node_modules\.bin\webpack

---