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]