本番環境

このガイドでは、本番環境のサイトまたはアプリケーションを構築するためのベストプラクティスとユーティリティについて詳しく説明します。

設定

開発ビルドと本番環境ビルドの目標は大きく異なります。開発では、強力なソースマッピングと、ライブリロードまたはホットモジュール交換を備えた localhost サーバーが必要です。本番環境では、目標は縮小されたバンドル、軽量のソースマップ、およびロード時間を改善するための最適化されたアセットに焦点を当てることにシフトします。この論理的な分離を念頭に置いて、通常は各環境に個別の webpack 設定を作成することをお勧めします。

本番環境と開発の固有の部分を分離しますが、DRY 原則を維持するために「共通」設定も維持します。これらの設定をマージするために、webpack-mergeというユーティリティを使用します。「共通」設定があれば、環境固有の設定内でコードを複製する必要はありません。

まず、webpack-merge をインストールし、前のガイドで既に作業した部分を分割してみましょう

npm install --save-dev webpack-merge

プロジェクト

  webpack-demo
  |- package.json
  |- package-lock.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js

+ const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+   entry: {
+     app: './src/index.js',
+   },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Production',
+     }),
+   ],
+   output: {
+     filename: '[name].bundle.js',
+     path: path.resolve(__dirname, 'dist'),
+     clean: true,
+   },
+ };

webpack.dev.js

+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   mode: 'development',
+   devtool: 'inline-source-map',
+   devServer: {
+     static: './dist',
+   },
+ });

webpack.prod.js

+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   mode: 'production',
+ });

webpack.common.js では、entry と output の設定を行い、両方の環境に必要なプラグインを含めました。webpack.dev.js では、mode を development に設定しました。また、その環境に推奨される devtool (強力なソースマッピング) と devServer 設定を追加しました。最後に、webpack.prod.js では、mode が production に設定されており、ツリーシェイキングガイドで最初に導入された TerserPlugin が読み込まれます。

環境固有の設定で merge() を使用して、webpack.dev.js と webpack.prod.js に共通の設定を含めていることに注意してください。webpack-merge ツールはマージのためのさまざまな高度な機能を提供しますが、このユースケースではそれらは必要ありません。

NPM スクリプト

次に、新しい設定ファイルを使用するように npm スクリプトを変更しましょう。webpack-dev-server を実行する start スクリプトには webpack.dev.js を使用し、本番環境ビルドを作成するために webpack を実行する build スクリプトには webpack.prod.js を使用します

package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "scripts": {
-     "start": "webpack serve --open",
+     "start": "webpack serve --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^4.30.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0",
      "xml-loader": "^1.2.1"
    }
  }

これらのスクリプトを実行して、本番環境設定に追加していくにつれて出力がどのように変化するかを確認してください。

モードの指定

多くのライブラリは、ライブラリに何をincludeすべきかを決定するために、process.env.NODE_ENV 変数を参照します。例えば、process.env.NODE_ENV が 'production' に設定されていない場合、一部のライブラリはデバッグを容易にするために追加のログ記録とテストを追加することがあります。しかし、process.env.NODE_ENV が 'production' に設定されている場合、実際のユーザー向けの実行方法を最適化するために、コードのかなりの部分を削除または追加する可能性があります。 webpack v4 以降、mode を指定すると、DefinePlugin を介して process.env.NODE_ENV が自動的に設定されます。

webpack.prod.js

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
  });

react のようなライブラリを使用している場合、DefinePlugin を追加すると、バンドルサイズが大幅に減少することがわかります。また、ローカルの /src コードもこれを利用できるため、次のチェックは有効です。

src/index.js

  import { cube } from './math.js';
+
+ if (process.env.NODE_ENV !== 'production') {
+   console.log('Looks like we are in development mode!');
+ }

  function component() {
    const element = document.createElement('pre');

    element.innerHTML = [
      'Hello webpack!',
      '5 cubed is equal to ' + cube(5)
    ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());

ミニファイ

Webpack v4+ は、production mode でデフォルトでコードをミニファイします。

TerserPlugin はミニファイを開始するのに最適なプラグインであり、デフォルトで使用されていますが、他にも選択肢があります。

• ClosureWebpackPlugin

別のミニファイプラグインを試す場合は、新しいプラグインがtree shakingガイドに記載されているようにデッドコードを削除し、optimization.minimizer として提供されていることを確認してください。

ソースマップ

ソースマップはデバッグやベンチマークテストの実行に役立つため、本番環境で有効にすることをお勧めします。ただし、本番環境での使用に推奨される、ビルド速度がかなり速いものを選択する必要があります（devtool を参照）。このガイドでは、*開発環境*で使用した inline-source-map とは対照的に、*本番環境*で source-map オプションを使用します。

webpack.prod.js

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
+   devtool: 'source-map',
  });

CSS のミニファイ

本番環境では、CSS をミニファイすることが非常に重要です。本番環境向けのミニファイセクションを参照してください。

CLI の代替

上記で説明した多くのオプションは、コマンドライン引数として設定できます。たとえば、optimization.minimize は --optimization-minimize で、mode は --mode で設定できます。 CLI 引数の完全なリストについては、npx webpack --help=verbose を実行してください。

これらの省略形は便利ですが、設定の柔軟性を高めるために、webpack 設定ファイルでこれらのオプションを設定することをお勧めします。