1、webpack-模块化打包工具

webpack是一个模块打包工具，可以翻译import等简单的语法。除了能识别ES Moudule规范（import），此外也能识别CommonJS、CMD、AMD等模块化语法。

一、模块化的使用实例

1.1、ES Moudule的使用方式

其它模块文件导出内容

// header.js文件

function Header () {
  let root = document.getElementById('root');
  let ele = document.createElement('div');
  ele.innerHTML = '这是头部'
  root.append(ele);
}
export default Header;

// footer.js文件
function Footer () {
  let root = document.getElementById('root');
  let ele = document.createElement('div');
  ele.innerHTML = '这是底部2'
  root.append(ele);
}
export default Footer;

index.js文件中引入所需模块

import Header from './header';
import Footer from './footer';

Header();
Footer();

1.2、Commonjs的使用方式

其它模块文件导出内容

// header.js文件

function Header () {
  let root = document.getElementById('root');
  let ele = document.createElement('div');
  ele.innerHTML = '这是头部'
  root.append(ele);
}
module.exports = Header;

// footer.js文件
function Footer () {
  let root = document.getElementById('root');
  let ele = document.createElement('div');
  ele.innerHTML = '这是底部2'
  root.append(ele);
}
module.exports = Footer;

index.js文件中引入所需模块

let Header = require('./header');
let Footer = require('./footer');

Header();
Footer();

二、webpack打包实例

打包完成后默认会生成一个dist/main.js文件

2.1、ES Moudule引入方式的打包实例

$ npx webpack ./es/index.js
[webpack-cli] Compilation finished
Hash: 4c44f5ae0a0586d9af15
Version: webpack 4.44.2
Time: 472ms
Built at: 2020/11/05 上午12:11:37
  Asset      Size  Chunks             Chunk Names
main.js  1.31 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./es/index.js + 3 modules 811 bytes {0} [built]
    | ./es/index.js 123 bytes [built]
    | ./es/header.js 228 bytes [built]
    | ./es/side.js 230 bytes [built]
    | ./es/footer.js 230 bytes [built]

2.2、Commonjs引入方式的打包实例

$ npx webpack ./commonj/index.js
[webpack-cli] Compilation finished
Hash: d0649da5dbdf7df222d7
Version: webpack 4.44.2
Time: 463ms
Built at: 2020/11/05 上午12:13:37
  Asset      Size  Chunks             Chunk Names
main.js  1.38 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./commonjs/index.js 132 bytes {0} [built]
[1] ./commonjs/header.js 230 bytes {0} [built]
[2] ./commonjs/side.js 232 bytes {0} [built]
[3] ./commonjs/footer.js 233 bytes {0} [built]