フロントエンド開発環境Webパッケージ(2)

📍 前回の授業では、ネットパッケージの背景を簡単に理解しました.モジュールが出現したが,標準モジュールシステムはすべてのブラウザで同様に適用できる環境を備えていないため,Webパッケージが出現した.

2.入出力

下図は公式ホームページの画像です.ネットパッケージのイメージを最も説明できるようです.

前述したように、src/math.jsにsumという関数が作成され、src/app.jsというファイルでimportを介してsum関数が呼び出される.
ボックスの左にある矢印は、ファイルが互いに依存していることを示します.
ただし、ボックスの右側を見ると、js、css、jpg、pngファイルの組み合わせが1つしか見えません.
これがWebPackの役割です.なんだ.
Webパッケージは、複数のファイルを1つのファイルにマージするバンドルパッケージです.
1つの開始点(entry point)からすべての依存モジュールを見つけ、結果を生成します.
Webパッケージを簡単にバンドルできるようになりました.

$ npm install -D webpack webpack-cli

WebpackとWebpack-cliをインストールします.--mode、--entry、--output-pathの3つのオプションをコードバインドに使用できます.

$ node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist

--modeは、Webパケット実行モードを示す.

--entryは、開始点パスを指定するオプションです.

--output-pathは、成果物をバインドするパスです.

バンドルが完了したというメッセージが表示されます.そこでdist/main.jsが生まれた.
index.htmlを開くと、同じようによく機能していることがわかります.
バンドルする場合は、上記の3つのオプションではなく、より多くのオプションを追加できます.長いコマンドを入力するたびに面倒なので、Webパッケージプロファイルを作成して個別に管理します.
webpack.config.js

const path = require('path');

module.exports = {
  mode :'development',
  entry : {
    main : './src/app.js' 
  }
  output : {
    path : path.resolve('./dist'),
    filename : '[name].js',
  }
}

にoutputに設定された[name]は、entryに追加されたmainが文字列として入る方式である.
絶対パスを使用するのでpathというモジュールのresolve()関数を使用して計算します.
最後はパッケージjsonファイルのスクリプトセクション

{
  "scripts": {
    "build": "./node_modules/.bin/webpack"
  }
}

修正後output.path!同じように滑らかな仕事をします.
👍 金正煥のブログに基づいて作成されたロケーション.