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 finishedHash: 4c44f5ae0a0586d9af15Version: webpack 4.44.2Time: 472msBuilt at: 2020/11/05 上午12:11:37  Asset      Size  Chunks             Chunk Namesmain.js  1.31 KiB       0  [emitted]  mainEntrypoint 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 finishedHash: d0649da5dbdf7df222d7Version: webpack 4.44.2Time: 463msBuilt at: 2020/11/05 上午12:13:37  Asset      Size  Chunks             Chunk Namesmain.js  1.38 KiB       0  [emitted]  mainEntrypoint 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]