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
Reference
この問題について(Webpack), 我々は、より多くの情報をここで見つけました
https://velog.io/@ouo_yoonk/Webpack
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
//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>
var hello = hello||{};
(function(){
function helloWorld(a){
return 'hello world'+a+'!'
}
hello.helloWorld = helloWorld;
})
// hello.js
exports function helloWorld(a){return 'hello world'+a+'!' }
// app.js
const helloWorld = require('./hello.js');
helloWorld('yooooonk');
//hello.js
export function helloWorld(a){return 'hello world'+a+'!' }
// app.js
import * as hello from './hello.js';
//import {helloWorld}
hello.helloWorld(a);
Reference
この問題について(Webpack), 我々は、より多くの情報をここで見つけました https://velog.io/@ouo_yoonk/Webpackテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol