Webpack



1.登場背景


モジュール


モジュールのない時代

//hello.js
function helloWorld(a){
	return 'hello world'+a+'!' 
}
// app.js
console.log(helloWorld('yoooonk'));  // hello world yooooonk!
...
<body>
  <script src="src/hello.js"></script>
  <script src="src/app.js"></script>
</body>
モジュールがない場合は、htmlファイルに上記の方法でロードして実行します.
これにより、関数はグローバルscopeで動作します.

IIFEモジュール


関数スキャンを作成して使用します.
var hello = hello||{};
(function(){
	function helloWorld(a){
	return 'hello world'+a+'!' 
    }
  
  hello.helloWorld = helloWorld;
})

CommonJS


exportsキーワードを使用してモジュールを作成し、require()関数を呼び出して使用できます.Nodejsの使用方法
// hello.js
exports function helloWorld(a){return 'hello world'+a+'!' }
// app.js
const helloWorld = require('./hello.js');

helloWorld('yooooonk');

ES 2015における標準モジュールシステム


標準モジュールシステムの出現により、通常、バーベルおよびネットワークパッケージを使用してモジュールシステムを使用する.
EXportキーワードを使用してモジュールを作成し、importキーワードをインポートして使用します.
//hello.js
export function helloWorld(a){return 'hello world'+a+'!' }
// app.js
import * as hello from './hello.js';
//import {helloWorld} 
hello.helloWorld(a);

📑 reference https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html