[webpack] webpack 2 入門: debug, sourcemap, uglify, watch

公開日: 2017/06/01
更新日: 2018/10/04

JavaScript の開発時のデバッグモード（sourcemap）、ファイルの変更を監視する watch、プロダクションビルド時の難読化（uglify）について。

ヘルプコマンドが一番分かりやすい情報でした。

% $(yarn bin)/webpack --help
webpack 2.6.1
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] <output>
Usage with config file: webpack
Config options:
  --config  Path to the config file
                      [文字列] [デフォルト: webpack.config.js or webpackfile.js]
  --env     Environment passed to the config, when it is a function
Basic options:
  --context    The root directory for resolving entry point and stats
                                    [文字列] [デフォルト: The current directory]
  --entry      The entry point                                          [文字列]
  --watch, -w  Watch the filesystem for changes                           [真偽]
  --debug      Switch loaders to debug mode                               [真偽]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)                  [文字列]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                          [真偽]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production"                          [真偽]
  --progress   Print compilation progress in percentage                   [真偽]

Contents

debug mode, sourcemap

開発時には、ショートカット -d を利用します。
オプション --debug --devtool eval-cheap-module-source-map --output-pathinfo がまとめて指定されます。

% $(yarn bin)/webpack -d

production build, uglify

納品用の build には、ショートカット -p を利用します。
オプション --optimize-minimize --define process.env.NODE_ENV="production" がまとめて指定されます。

% $(yarn bin)/webpack -p

ディフォルトで UglifyJsPlugin を利用して Minify してくれました。

watch

entry point に指定したファイルの変更を監視し、検知したら処理を走らせます。

% $(yarn bin)/webpack -w

webpack Dev Server

ちなみに webpack-dev-server を利用すると、ポート 8080 番を使う Express の Node.js サーバが立てられます。
内部的に webpack を実行してくれます。
Livereload も標準でありますので、サーバが欲しい場合はこちらを使いましょう。