Modulverpackungswerkzeug - einfache Verwendung von Webpack

1. Verwenden Sie npm in nodejs, um das Webpack herunterzuladen

npm install [email protected] -g

Fügen Sie hier eine Bildbeschreibung ein
Nach Abschluss des Downloads können Sie die Version überprüfen

2. Fall

Fügen Sie hier eine Bildbeschreibung ein

Das Exportmodul mathUtils.js

function add(arg1, arg2) {
    
    
    return arg1 + arg2;
}

function sub(arg1, arg2) {
    
    
    return arg1 - arg2;
}

export {
    
    
    add,sub
}

main.js Importmodul

import {
    
    add,sub} from './mathUtils.js'

console.log(add(10,20));

console.log(sub(50,20));

Falsches Paket bei direkter Verwendung von main.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script  src="./src/main.js"></script>
<body>
    
</body>
</html>

Fügen Sie hier eine Bildbeschreibung ein

Verwenden Sie Webpack zum Lösen

Geben Sie die Konsole ein

Webpack. \ src \ main.js. \ dist \ bundle.js

Fügen Sie hier eine Bildbeschreibung ein

Ändern Sie dann die src-Verzeichnisdatei

<script src="./dist/bundle.js"></script>

Fügen Sie hier eine Bildbeschreibung ein

Im vorläufigen Test können Sie dem zu testenden Skript type = 'module' hinzufügen und dann das Webpack verwenden, um es beim Veröffentlichen auf dem Server zu verpacken und zu veröffentlichen

Ich denke du magst

Origin blog.csdn.net/Android_Cob/article/details/106160626
Empfohlen
Rangfolge