webpack について

webpack とは

モジュールバンドラーと呼ばれるツール
ES2015 より、JS にモジュールの概念が導入された
- ここでのモジュールは、.jsファイルのこと
- import / export
node_modules/.bin/webpack に実行ファイルのシンボリックリンクが貼られる
例：dist/main.js

モジュールバンドラーとは

ES Moduleや、Node.jsで利用されているCommonJSのモジュール方式で記述されたソースファイルを束ねて、ブラウザで実行可能な静的な JS ファイルを出力
Web のフロントエンド開発で npm パッケージを多用するようになったので、必須のツール
また、webpackにはLoaderという仕組みがあり、各モジュールを束ねる際に事前処理を挾むことが可能
webpack を使ったJSXの変換は、Loaderを利用し行う

webpack の役割

webpack は指定されたファイルを起点として、そこからimport文を頼りに芋づる式にファイルを繋げてゆき、一つにまとめた JavaScript ファイルを出力
このまとめる処理はバンドル（bundle）と呼ばれる。（束ねるの意）
そしてバンドルを行うツールはバンドラーと呼ばれてる。
ポイントは、「基本機能はあくまで一つの JavaScript ファイルにまとめる」というところ。

基本的な設定

webpack.config.js に設定を書いていく

module.exports = {
  /* entry フィールド
   * 実行の起点となるファイルの指定
   */
  entry: './entry.js',

  /* ouputフィールド
   * 出力に関する設定
   */
  output: {
    filename: 'output.js'
  },

  module: {
    rules: [
      /* babel-loaderの設定
       *  .js拡張子のファイルに babel-loader を適応する設定を記述
       */
      {
        loader: 'babel-loader',
        test: /\\.js$/,
        options: {
          // Loaderに渡す設定を記述する場所
          presets: ['react']
        }
      }
    ]
  }
};

webpack の Loader を使って JSX のトランスパイルを行うことで、ビルドプロセスを webpack に統一することができる

webpack を実行

./node_modules/.bin/webpack --config webpack.config.js

output.js が出力される
出力された output.js を下記のように <script> タグで読み込むだけの HTML を記述する

<body>
  <div id="root" />
  <script src="output.js" />
</body>