Webpackサマリー

Wecode学習発表の概要

使用

main.js

function func(name){
   return name
}

index.js

func("dongha") // dongha

mainファイルとindexファイルはいずれもhtmlで実行されるため、funcという関数を別のファイルで使用すると競合する可能性があります.それを補うためにWebPackを使用しました.Webパッケージは、モジュールパッケージを介して複数のファイルを1つのjsコードに圧縮するライブラリです.

モジュールとは

アプリケーションが大きくなると、ファイルは分離され、これらのファイルはそれぞれモジュールと呼ばれます.モジュールは、1つ以上のクラスの関数からなるライブラリで構成されます.スクリプトはモジュールです.exportとimportを使用して他のモジュールをインポートできます.
index.js

import nameMake from "./main.js"
document.querySelector("body").innerHTML = nameMake("dongha")

main.js

function nameMake(name) {
    return `${name}!!`
}
export default nameMake

開始します。

npm init
npm install -D webpack webpack-cli

すべてのファイルをsrcフォルダに移動します.

Webパッケージの構成

Entry

Webパッケージを構築するファイルの開始位置を示します.


mode
none, development, production

Output

圧縮ファイルの格納場所と名前を指定します.

npx webpackを使用してバンドルを開始

Loaders

Webパッケージは、すべてのファイルをモジュールと見なします.css、pngなどは縛ることができます.

npm install --save-dev style-loader css-loader

index.js

import css from "./style.css"

Plugins

ローダがファイル単位で処理されると、プラグインはバインドされた成果物を処理します.特定のターゲットを抽出します.ロードプログラムは、最終的にモジュールをOutputとして作成するときに使用され、プラグインは最終結果を変更します.

npm install --save-dev html-webpack-plugin

の最後の部分
注意:
生活コード
https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html