webpack導入でよく使うネタまとめ

最近フロントエンド開発する際、必ずバックエンドとは別途に
エコシステムを導入していて、その中で依存関係解決のために
webpackを採用しています。

ただ、使いたいモジュール在り来でwebpackを採用しただけで、
細かいオプション等を理解できていなかったのでまとめることにしました。

きっかけになったのはElectronでアプリ開発したとき、
今まで使ってたテンプレだけだと動かなかったので。

書いてみてわかったのが、ほとんど公式のドキュメントの一部を
まとめただけになっちゃったかも。

webpackはそもそも何をしてくれるものなのか

依存関係にあるアセットやモジュールをバンドルして出力してくれるもの。
説明をわかりやすく、とりあえずJavaScriptのみで書きますが
CSS(Sassなど含む)や画像ファイルとかもバンドルできます。

CommonJSで書いたものを、ブラウザで動くようにしてくれる、と
とりあえずざっくりそういうもの。
(後述するloaderによってCommonJS以外にも対応可能)

webpack理解の基本

上記の参考リンクにもあるように、以下の4つのコアとなるコンセプトが存在します。
後ほど、それぞれを掘り下げたいと思います。

ここではざっくりと。

1. Entry

バンドルしたいアプリケーションやソースコードのエントリポイントを指定する。
(Javaでいうpublic static void main(String[] args)みたいな)

参考:webpack Entry Points

Entryは単一(String)でも複数(Object)でも指定することができます。

単一エントリ

複数エントリ

2. Output

Entryで指定したエントリポイントからグラフを作成し、依存関係を解決し、バンドルした
ソースコードをどこに出力するか、を指定する。

参考:webpack Output

最低限必要な項目は2項目でfilenamepath

複数のエントリポイントがあった場合はこれだと全部bundle.js
なってしまうので、それに対応できるようにします。

filename[name]とあるように、特別な値(この例ではオブジェクトのキー)
を代入させることができます。

利用できる値はこちらで確認できます。

3. Loaders

さきほど、CSSやHTML、画像ファイルもアセットとしてバンドルできると書きましたが、
Webpack単体ではJavascriptしかバンドルできません。

そこで、loaderという、専用のライブラリを用いることで、jsだけでなく、関連ファイルを
バンドルできるようにします。

ここではどのファイルどのloaderを使用するか、を指定できます。

※CommonJSのみを、ブラウザで実行するだけであれば設定不要です。

ReactのJSXやVueの.vue、stylusのコンパイルなども可能です。

例えばCommonJSじゃなくてTypeScriptで書きたいとか、React使ってるなら
JSX使う、とか、そういうときに設定が必要になります。

必要なライブラリを予めインストールしておきましょう。
TypeScriptであれば以下。

そのあと設定ファイルに

ここで注意なのが、上記の書き方はWebpack2.x以上のものになります。
古いバージョンに対応した書き方はドキュメントを参照してください
(使ってるのが1.x系だったのを気づかず、この書き方で設定していて、動かずはまった)

と書けばOKです。
.tsで終わるファイルに対してはts-loaderを利用して
バンドルを行う、という内容になってます。

その他、import時に指定したり、コマンドラインからも指定する
方法もありますが、ここでは省略します。
(参考リンクに書いてあります)

loaderによっては項目が異なるので、掘り下げませんが、optionという
オブジェクトを渡すことで細かい設定も可能です。

PluginによってLoaderの機能を拡張することも可能みたいです。

4. Plugins

Loaderはファイルの変換を行うものでしたが、Pluginsは、それ以外のWebpackのプラグイン
を指します。(Loaderを拡張するものも、ここに含まれます。)

例えば簡易Webサーバを立ち上げたり、ホットリロードに対応したり、ですね。
今回はここは、あんまり深く書かないかも。

よく見かけるけど雰囲気で使ってる設定項目

ここが本題。自分でスクラッチでも細かく設定できるように、今まで「なにこれ」
ってなってきたものをまとめる。

1. module.rules.(exclude|include)の設定

その名前の通り、loaderがエントリポイントから依存関係を解決する際に
ロード対象を含む(include)か除外(exclude)するディレクトリを指定する
オプション。

babel-loaderのREADMEにある
サンプルだとnode_modulesbower_componentsがexcludeに指定されていますね。

2. sourcemapも一緒に出力したい

一行追加するだけ!かんたん!

Webpack devtool この辺が設定可能みたい。

3. minifyしたい

webpackが標準でminifyのプラグインを提供してくれています
pluginsに以下の設定を追加するだけ。

4. 静的ファイル(例えば画像とかHTMLとか)のリンクをいい感じにしたい

outputs.publicPathの設定をすることで、リンク先を解決して変換してくれます。

こんな感じで設定されてる前提で、例えば下記のHTMLをimportしたとします。

そうすると、Webpackでバンドルされた後は、imgタグのsrc
/files/hoge.pngと変換されて出力されます。

5. VueのProduction環境でのビルドをしたい

これも公式にある通りに設定するだけで上手くいきます。

Vue プロダクション環境への配信のヒント

他にもネタたくさんありそうだから、追記していこうかな。
とりあえずここで公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です