webpackとは？
モジュール化した複数のファイルをまとめるバンドルツールです。ソースコードを束ねてブラウザで実行できます。
バンドルツールには、他には「Rollup」や「Parcel」等が存在します。
リリースノート
| バージョン | リリース年月 | 説明 |
|---|---|---|
| 3 | ||
| 4 | 2018年2月 | Node4のサポートがなくなり6〜9が推奨になりました。
modeオプションが追加された。 CommonsChunkPluginが廃止されて、splitChunksが代わりに追加されました。 |
| 5 | 2020年5月 | |
環境ごとの差異
webpackでは開発環境と本番環境で実行するか選ぶことができますが、下記のような違いがありますので認識しておきましょう。
開発環境(mode = development)
- ミニファイ(XXX.min.js)への圧縮がない。
- 圧縮作業がない分、ビルド時間が少ない。
- 圧縮作業がない分、パフォーマンスが悪い。
本番環境(mode = production)
- ミニファイ(XXX.min.js)へ圧縮する。
- 圧縮作業をする分、ビルド時間が多い。
- 圧縮作業をする分、パフォーマンスが良い。
webpackの機能
モジュール化したファイルの結合
単純に、ファイルを結合するのではなく、そのモジュールの依存状況を解決しながら結合します。
JavaScriptだけでなく、css、画像等のファイルも結合することができます。
なお、初めに読み込まれるエントリポイントとなるファイルからたどり、使用されているリソースだけを結合するので、アプリに不要なファイルを読み込むことはないです。
webpackのメリット
- ファイルを分けて開発（モジュール化）ができるため。
- 自分が作成したモジュールだけでなく外部モジュール（npmパッケージ）も利用できる。
- モジュールをまとめることでリクエスト数を減らせる。
webpackの詳細
distディレクトリ
モジュールをかき集めてバンドルした結果を出力する先になります。
webpack.config.js
webpackの設定ファイルです。具体的にどのJSファイルをバンドル対象とするのか、どこにバンドルしたファイルを出力するのか等を明示的に設定することができます。
webpack.config.jsの例
|
1 2 3 4 5 6 7 8 9 10 |
const path = require('path') const outputPath = path.resolve(__dirname,'dist') module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: outputPath } } |
設定項目
| 設定項目 | 説明 |
|---|---|
| entry | Webpackのエントリーポイント、指定したディレクトリがモジュールバンドルの対象になります。 |
| cache | webpack5から登場した。 trueを指定するとキャッシュしてビルド速度を向上させることができます。 |
| output | bundleファイルをwebpackがどこにどのような名前で出力すればいいのかを指定できます。 |
| ├filename | 出力ファイル名を指定します。 |
| ├path | 出力ファイルのパスを指定します。「path: path.resolve(__dirname, 'dist')」等で記述されていることが多いです。「__dirname」はアプリのルートディレクトリ、'dist'がディレクトリです。path.resolveで第一引数と第二引数をつなげます。 |
| └publicPath | バンドルファイルをアップロードした場所を指定します。（Dockerでwebpackを管理している場合は、dockerで動作させているURLを指定したりします。） |
| Leaders | 指定すればJavaScript以外のファイルも認識できるようになる。 |
| target | 特定の環境をwebpackに指示する。 デフォルトは「web」でブラウザ環境で使用するようなコンパイルになる。 「node」と指定した場合はNode環境を使うことを明示できる。 |
| Plugins | webpackができることの幅を広げることができる。 |
| resolve.extensions | ここで指定した拡張子はrequireで指定する拡張子を省略することができる。 |
| module | 「こういう拡張子のファイルはこのLoaderでいい感じにTransformして」という指定ができる。 |
| devtool | ソースマップを表示して、開発効率をあげれる。「false」を指定するとdevtoolを無効にできる。 |
| devServer | 「webpack-dev-server」の設定です。 |
| ├index | |
| ├contentBase | サーバーの起点ディレクトリです。webpack-dev-serverを立ち上げた時のドキュメントルートを設定 |
| ├publicPath | バンドルされたファイルの場所 |
| ├host | 外部からアクセスしたい場合のホスト |
| ├disableHostCheck | virtual boxなどの仮想化環境や、ngrokなどでローカルホスト外から使った場合に「Invalid Host header」が出ないようにするための設定 |
| ├port | ポート番号 |
| └headers |
webpack-dev-serverとは？
webpackの開発サーバーのことです。使いたい場合はyarnとかで別途インストールします。デフォルトのポート番号は8080でpackage.jsonとかに下記のような記述をするなどして起動できるようにします。
|
1 2 3 |
"scripts": { "start": "webpack-dev-server --mode=development", } |
ProvidePlugin
|
1 2 3 4 5 6 |
plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] |
ローダーとは？
CSSや画像等のJavaScript以外のアセット等をJavaScriptとして扱うためのwebpackの機能です。
ローダーの種類
- cssローダー
- styleローダー
- urlローダー
- fileローダー
- saasローダー
- babelローダー
- eslintローダー
cssローダー
cssをモジュールバンドルに組み込むためのローダーになります。
styleローダー
モジュールにバンドルされたcssのスタイルを実際に適用するためのローダーです。
urlローダー
画像ファイルをモジュールバンドルに組み込むためのローダーになります。ただしそのまま使うと画像ファイル名がbase64で送信することになるのでそれを埋め込むHTMLは膨大なサイズになり初期表示時のパフォーマンスに影響が出る可能性があります。その場合は後述するfileローダーと組み合わせて使いbase64形式ではない通常の我々に親しみがあるような画像ファイル名をHTMLに埋め込むことで対処したりします。
fileローダー
一定の閾値を超える画像ファイル等を読み込む際は並列処理をしてくれるのでパフォーマンスをあげることが可能です。
sassローダー
sassをモジュールバンドルに組み込むためのローダーになります。使用することでsassの変換ができます。
なお、以下二種類のいずれかを指定することができnode-sassは2023年現在は非推奨になっているので新規開発ではdart-sassを指定するようにしましょう。
- node-sass（開発中止）
- dart-sass
babelローダー
トランスコンパイラであるbabelをモジュールバンドルに導入できます。
eslintローダー
JavaScriptで最も利用されているリンターを導入します。eslintによる静的なソース解析をリアルタイムに実行させることができるようになります。
この記事へのコメントはありません。