KDE BLOG

Webデザインやコーディングについて書いています

トップ > webpack > 【webpack速習】vol.4: Development

【webpack速習】vol.4: Development

webpack

下記ページの要点になります。 webpack.js.org

開発時に役立つ機能のガイドページになります。
コードを自動的にコンパイルし、簡単な開発サーバを実行する内容です。

development mode

  • mode に development を追加する

▼ webpack.config.js

module.exports = {
+ mode: 'development',
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
  // 略

設定は必須（'none' or 'development' of 'production'）で、設定しない場合 注意を促すメッセージがターミナルに出る。
設定していない場合（デフォルト）の出力形式は production モードとして出る。

development mode では コードの圧縮、最適化などがされない代わりに、開発時のコードが大体そのままで、ビルドが早い。

source maps を使う

ひとまず inline-source-map を使う。

▼ webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.js',
    print: './src/print.js',
  },
+ devtool: 'inline-source-map', 
  // 略

これで yarn build を行い、jsエラーなどが発生すると、きちんとエラー元のモジュールを追跡できるようになる。

開発ツールの選択

コードを変更するたびに毎回 ビルドのためにコマンドを打つのは面倒。
webpack にはコードが変更されるたびに自動的にコードをコンパイルするのに役立つオプションがいくつかある。

  1. watch モード
  2. webpack-dev-server
  3. webpack-dev-middleware

watch モードを使う

依存関係グラフ内にあるすべてのファイルの変更を webpack が監視する。
これらのファイルのうち1つでも更新されるとコードが自動で再コンパイルされる。

▼ package.json

{
  // 略
  "scripts": {
    "build": "webpack",
+   "watch": "webpack --watch"
  },
  // 略
}

yarn watch コマンドを実行して、関連ファイルを更新すると、 プロセスが終了することなく、ファイルが出力されているのが分かる。
唯一の欠点は、ブラウザの更新を手動で行う必要があること。
しかしこの問題は webpack-dev-server を使えば解決できる。

webpack-dev-server を使う

webpack-dev-server はシンプルな web サーバとライブリロードを使う機能を提供する。

インストール

yarn add webpack-dev-server --dev

設定ファイルを変更します。

▼ webpack.config.js

module.exports = {
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist',
+   },

これにより webpack-dev-server は localhost:8080 の distフォルダからファイルを見るようになる。

webpack-dev-sever はコンパイル後にバンドルファイルを出力しない。
代わりにメモリ内に保持して、それがサーバのルートパスにマウントされた実際のファイルであるかのようにそれらを処理する。

package.jsonにコマンドのエイリアスを追加。

▼ webpack.config.js

  // 略
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
+   "start": "webpack-dev-server --open"
  },

--open オプションを付けることで、コマンド実行されると新規ウィンドウが立ち上がって表示する。
依存関係にあるファイルを更新すると、ブラウザが自動でリロードされる。

webpack-dev-server にはたくさんのオプションがあるので詳細はドキュメントで。 DevServer | webpack

webpack-dev-middleware を使う

  • webpack-dev-middleware は webpack によって処理されたファイルをサーバーに送信するラッパー
    • webpack-dev-server で内部的に使用されている
    • 必要に応じてカスタム設定をするための個別のパッケージとして利用可能
webpack-dev-middleware と express サーバを組み合わせた例

express と webpack-dev-middleware をインストール

yarn add express webpack-dev-middleware --dev

▼ webpack.config.js

module.exports = {
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
+   publicPath: '/',
  },
  // 略

publicPath は、ファイルが http://localhost:3000 で配信できるようにするために、あとでサーバーサイドスクリプト（node.js）内でも使う。 （ポート番号もあとで設定）

次に express サーバを設定するために、プロジェクトフォルダのルート直下に server.js を作成する。

project
   |- package.json
   |- webpack.config.js
+  |- server.js

▼ server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config');
const compiler = webpack(config);

// webpack-dev-middleware と webpack.config.js を使うようにexpressに伝える
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath // ここでさきほどの publicPathを使用
}));

app.listen(3000, () => {
  console.log('Example app listening on port 3000!\n');
});

これで設定完了。
npm scriptを作成する。

▼ package.json

"scripts": {
  "build": "webpack",
  "watch": "webpack --watch",
  "start": "webpack-dev-server --open",
+ "server": "node server.js"
},

yarn server でコマンド実行して、http://localhost:3000 にアクセスするとアプリケーションが見れる。
（ライブリロード機能は無し）