webpack packaging tools simple case

Directory Structure:

 

 

 Entry file: main.js

The projects are all dependent files into main.js

 

 

 

// 1. CommonJs modular specification 
const the Add {,} = MUL the require ( './ mathUtil.js' )

console.log(add(20, 30));
console.log(mul(20, 30));

// 2. ES6 modular specification 
import {name, age, height} from './info'
console.log(name);
console.log(age);
console.log(height);

Main.js then packaged as an entry document, webpack packed in time will find all of the dependent files and parses

Packaging commands:

webpack ./src/main.js ./dist/bundle.js

It said it would main.js src directory under the package to bundle.js dist directory

 

Then reference only index.html inside bundle.js on it