ネットバッグは何ですか?

WebPackは、複数のJavaScriptとJSONのファイルを1つのファイルに組み合わせたモジュールバンドルです.
Webパッケージを使用すると、依存関係にある複数のJavaScriptモジュールを1つのファイルに組み合わせることができるので、ES6をサポートしていないimport/exportの古いブラウザでもモジュール機能を使用することができる.
また、loaderにより、JavaScriptやJSONではないファイルをモジュールにバインドすることもでき、モジュールを1つのモジュールに統合するほか、画像をデータURLに変換するなど、さまざまな自動化や最適化機能をサポートします.

Webパッケージの基本概念

Webパッケージを使用する基本概念は概ね次のようになります.

入門レベル

出力(アウトバウンド)

Loaders(ローダ)

プラグイン

各プロジェクトにどのような機能があるかを調べてみましょう.

Entry(エントリ)

モジュールをバンドルすると、WebPackはEntry Pointに依存する複数のモジュールをバンドルします.
デフォルト値は./src/index.jsです.Entry Pointは、プロファイルで次のentryのプロパティで変更できます.

module.exports = {
    entry : './[directory]/[entrySource]'
}

例えば、Entry Pointは、以下の構成においてmain.jsに依存するものとする.
js
|- main.js
|- sum.jswebpack.config.js

このときsum.jsはEntry Pointであり、以下のように設定されている.
webpack.config.js

module.exports = {
    entry : './js/main.js'
}

このほか、main.jsを複数指定することもできる.詳細については、Entry Points|Webパッケージを参照してください.

出力(Output)

Output(Output)は単語のように、Webパッケージモジュールがバンドルした結果をどこに出力するかを教える役割を果たします.

const path = require('path');

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

Entry Pointプロパティは、バインドファイルの名前付きプロパティであり、filenameはファイルの格納ディレクトリを指定します.
また、pathプロパティは絶対パスに設定する必要があります.この点に注意してください.

Loader(ローダ)

上にも書いてありますが、Webパッケージは基本的にpathとJavascriptのファイルのみをモジュールとして認識します.
ただし、Webパッケージは、バインド中にモジュールをロードする際にLoaderを用いて前処理を行うことができるため、JSONや.cssなどのファイルもモジュールとして使用することができ、ファイルをロードする際には、Loaderに.tsを登録して変換するなど多様な操作を行うことができる.
例えば、babelが、.cssの拡張子を有するファイルをバインドするために適用されると仮定する.css-loaderは、css-loaderファイルをモジュールに含めるためのロードプログラムである.

module.exports = {
    module : {
        rules : [{ test : /\.css$/, use : 'css-loader' }]   
    }
}

前述したように、css属性内でロードプログラムをどのように適用するかを記述する.module.rulesプロパティは、正規表現を使用してどのファイルに適用されるルールを指定し、testプロパティは適用されるロードプログラムを指定します.
さらに、Loaderはフィルタ機能をサポートし、1つのuse属性に対して複数のtestを指定することができる.例えば、loaderによってバンドルされたcss-loaderを実際に適用するために、cssをスクリーニングすることができる.

module.exports = {
    module : {
        rules : [{ test : /\.css$/, use : ['style-loader', 'css-loader'] }]   
    }
}

style-loaderのプロパティをフラットテキストに変更し、適用するLoaderを指定します.ただし右から左の順に適用することに注意!

Plugin

Loaderがモジュールのロード時に前処理を担当する場合、Pluginはバインドされた成果物の最適化または加工を担当します.useを適用して、バンドルされた成果物を含むhtmlファイルを生成します.

const htmlWebpackPlugin = require('html-webpack-plugin');
const htmlWebpackPluginOption = { template : './html/main.html' };

module.exports = {
    plugins : [ new htmlWebpackPlugin(htmlWebpackPluginOption) ]
}

ご覧のように、html-webpack-pluginはpluginプロパティに配列形式で追加されます.plugins演算子を使用して、コンストラクション関数によって生成されたインスタンスを追加する必要があります.

WebPackベースの使い方!

上記の内容に基づいて、簡単な実践を通じて、newを含む各種babelとLoaderを応用し、実際にファイルをバインドします!😆
まず、Pluginを使用するために、初期化から開始する.
npm init -y
次に、バインド用のファイルを適切に作成します.実習で使用する書類の構造と内容は以下の通りである.

main.js

module.js

main.css

main.html

それでは、今からインターンシップに必要な各種パッケージをインストールしましょう.

webpack :
npm i -D webpack webpack-cli babel-loader css-loader style-loader html-webpack-plugin

babel :
npm i -D @babel/core @babel/cli @babel/preset-env

今回の実験ではnpmを用いたため,babel-loaderファイルを生成し,babel.config.jsonを設定した.
babel.config.json
babelの設置が完了したら、babelの設置にしましょう!
webpack.config.js
webpackディレクトリは/dist/jsです.
一番下のoutputのオプションを指定するのは、targetからWebpack v5を基準に変換するため、ES6を適用してもbabelに変換できないという問題があります.
設定が完了したら、es5コマンドでバインドしましょう!

正常に動作すると、上のログが残ります.バンドルされたファイルをチェック!
/dist/js/bundle.js
npx webpackは自動的に圧縮され、可読性は低下するが、光硬化生成物である.
/dist/html/index.html

バンドルされたファイルをwebpackのhtmlに自動的に挿入することによって生成された新しいhtml-webpack-pluginファイル.
では、htmlファイルを実行して、正常に動作しているかどうかを確認します.

Chromeブラウザで正常に動作していることがわかります.では、古いブラウザも正常に動作しているかどうかを見てみましょう.

黄泉のブラウザIE 11でも正常に動作していることがわかります.ふ~ん
これにより、基本的なWebパッケージの設定と使用が可能になります.詳細については、webspack公式ドキュメントwebpackを参照してください.

実習環境

"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1"
参考資料
コンセプト|Webパッケージhttps://webpack.kr/concepts/