webpackとは

webpackとはモジュールバンドラーになります。

webpacklを利用することで、複数のモジュールを依存関係を解決して一つのアセットにまとめることが出来ます。（下記イメージ図）

f:id:lhiroki1205:20210722130411p:plain

webpackメリット

モジュールを一つにまとめることで、パフォーマンスを落とさずにHTTP通信が可能になる
スクリプトの読み込み順番とかの依存関係をwebpackでまとめることが出来る
外部モジュール（npmとかでインストールしたもの）もバンドリングすることができる

webpackデメリット

概念理解が難しい
webpack.config.js の設定がややこしい

webpackインストール

npm initでpackaje.jsonを作成する。 npm install webpack webpack-cliでwebpck本体とCLIを同時にインストールする。

webビルド

npx webpackでビルドすることが可能です。

npx webpack --mode development でdevelopmentoモードでビルドすることができる。

※ npxとは npmとnpx。なにが違う？

webpack.config.js

バンドリングの説明などの設定を記載するファイル。

webpackを理解する上で一番大事な箇所。

webpack.config.jsには大量の設定項目がありますが、まずは4つの中心的な項目について理解する必要があります。

■ Entry

webpackがビルドを始める際の開始点となるjsファイル。モジュールやライブラリの依存関係を判断、処理してくれます。

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, "entry.js"),
}

■ Output

bundleファイルをwebpackがどこにどのような名前で出力すればいいのかを指定できます。

distディレクトリの中にbundle.jsという名前で出力するとしたら次のようになります。

__dirnameはディレクト名称になります。

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, "entry.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

■ Loaders

webpack自身はJavaScriptしか理解できませんが、Loaderを使うことによってJavaScript以外のものも処理できるようになります。

testプロパティに拡張子を指定して、あるLoaderがどのような種類のファイルを処理するべきなのか特定する(正規表現で拡張子を指定)。下記の例で言うと、拡張子が.txtのものを指定している。
useプロパティにLoaderを指定して、testプロパティに指定したファイルがアプリケーションの依存関係や最終的なbundleファイルに加えられるように変換する。下記の例で言うと、txtファイルの場合はbundleファイルに追加する前にraw-loaderで変換する。

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, "entry.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    }
}

■ Plugins

Pluginはwebpackができることの幅を広げてくれます。

こんなプラグインが存在します。

プラグインを利用する場合はrequireして、plugins配列に追加します。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    entry: path.resolve(__dirname, "entry.js"),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}