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

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

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

> * [Command Line Interface (CLI)](https://webpack.js.org/api/cli/)

“`prettyprinted
% $(yarn bin)/webpack –help
webpack 2.6.1
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack []

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 [真偽]
“`

## debug mode, sourcemap

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

> * [Shortcuts](https://webpack.js.org/api/cli/#shortcuts)
> * [Devtool](https://webpack.js.org/configuration/devtool/)

“`prettyprinted
% $(yarn bin)/webpack -d
“`

## production build, uglify

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

> * [Shortcuts](https://webpack.js.org/api/cli/#shortcuts)
> * [Building for Production](https://webpack.js.org/guides/production-build/)

“`prettyprinted
% $(yarn bin)/webpack -p
“`

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

## watch

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

“`prettyprinted
% $(yarn bin)/webpack -w
“`

### webpack Dev Server

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

> * [webpack 2 入門: webpack-dev-server で LiveReload & Watch 対応のサーバをたてる | deadwood](https://www.d-wood.com/blog/2017/06/09_9033.html)
[/markdown]