webpack4
webpackは高速で高機能なJSバンドラー
バージョンが変わるとconfigファイルの書き方などが大きく違うため注意する
Webpackの基本
めっちゃわかりやすい記事
https://www.youtube.com/watch?v=fcMtBJJuPL0
導入
npm init -y または yarn init -y
npmプロジェクトとして，package.jsを作成
最初のpackage.jsを作るための質問を全てデフォルトにするためyオプションを設定 参考
npm i -D webpack webpack-cli または yarn add -D webpack webpack-cli
パッケージのインストール(i)
-Dは開発版に使うパッケージとしてのインストール．
これでpackage.jsのdevDependenciesに書き込まれる 参考
npm installでdependenciesのパッケージを読むが，devDependenciesは読まない
webpack-cliはwebpackをコマンドラインから扱うためのモジュール
webpack.config.jsを使ったwebpackのカスタマイズを可能にする？
バンドルする(JSファイルを1つにまとめる)
npx webpack
デフォルトの挙動
project/src/index.jsをエントリーポイントとする
project/dist/main.jsとしてバンドルしたファイルを作成
package.jsのscriptsに"build": "webpack" と書けばnpm run buildまたはyarn buildで実行
--watchオプションをつけるとJSファイルが書き換わるたびに高速な差分ビルドを行う
webpackの設定ファイル
webpack.config.jsをトップに作成
またはwebpack-cliへパスを通し．webpack-cli init
entry: まとめるJSファイルのルート
output: ファイルの出力pathとnameを設定
mode
"develop": 開発モード. ソースマップを作成し，圧縮しない
"production": 製品モード. ソースマップを作成し，圧縮
webpack-dev-server
webpackのローカルサーバーで，差分ビルドもできる
バンドルファイルを作成せず，オンメモリ上で動作させる
npm i -D webpack-dev-server または yarn add -D webpack-dev-server で追加
使い方
package.jsonのscriptsに"start": "webpack-dev-server"を追加
webpack.config.jsのdevServerに以下を記述
contentBase: "dist", # ローカルサーバーの読込先を指定
open: true # ブラウザを開く
npm run start または yarn start
Webpackのバンドルオプション
参考: webpack入門, webpackのチュートリアルをやってみる
--watch: 開発用に継続的差分ビルド(高速!)を行う
--progress: ビルドのプログレスバーを表示
--colors: ビルドのログを色付きで表示
-p: productionとしてビルドする．なければ開発用としてビルドする
ソースマップを含めるかどうかが主な違い．開発用の方が含める．
-dで明示的に開発用であることを示すこともできる
--mode=productionのように設定することもできる
webpack.config.jsの書き方
参考
webpack.config.jsがわからない
【意訳】Webpackの混乱ポイント
webpackでsource-mapを表示できるようにする
devtool: 開発者用ツールを指定
inline-source-map: デバッグ時にコードがわかるようソースマップファイルを作成
entry: ビルドを始める際の開始点となるjs/tsファイル．ここから依存をチェック
resolve: モジュールの依存関係を解決する方法を指定
extentions: importを処理する時有効な拡張子
modules: サードパーティモジュールのimportn解決する
デフォルトでnode_modulesが指定されている
plugins: moduleがファイル処理の拡張なのに対し，webpack自体の機能を拡張する
module: webpackがJavascript以外のファイルを処理するための変換器を置く
rules: バンドルする前にファイルを処理するためのモジュールを指定
test: モジュールが処理するファイルのファイル名の正規表現
use: ファイルを処理するためのモジュール名
exclude: testに当たっても処理しないファイル／フォルダ
output: webpackの出力先設定．
path: 出力先のディレクトリ
filename: 出力ファイル名
publicPath: CSSやHTMLファイルを置いておく場所．webpackがURLを適切に変更
作成例: #Phaser.js
webpack-dev-serverの実行オプション
参考: webpack4対応webpack-dev-serverの主要な設定オプション
これらの機能は，webpack.config.jsのdevServerでキャメルケースにすることで設定可能
--hot: Hot Module Replacement(JSの変更があったらその変更だけ取入)を有効にする
--inline: デフォルト．オートリロード用のコードがバンドルのソースに組み込まれる
--content-base dist/: htmlやcssを置いておくコンテンツベースのディレクトリを指定
--watch-content-base: jsだけでなく，HTMLやCSSの変更があった時にも更新
--open-page index.html: サーバ起動後自動的にindex.htmlを開く
--port: 開発用サーバを起動するポートを指定