commjs规范
- 一个文件就是一个模块
- 每个模块都有单独的作用域
- 通过modules.exports导出成员
- 通过require载入该函数模块
Amd模块化规范
ESModule规范
在html导入js脚本默认采用严格模式
每个ESM运行在单独的私有作用域中
ESM是通过CORS请求外部js模块
ESM会延迟加载脚本优先渲染网页html和css,类似defer属性
export { name as fullname } //通过as关键词进行导出模块的重命名
import注意事项
import ( './module') //可以动态导入模块
import as mode form ('./module') //导出多个值通过mode.attr获取导出对象
default导出不用加{ },不加default导出要加{ }
esm与commonjs区别
- esm可以导入commonjs模块
- commonjs不能导入esm模块
- commonjs始终导出一个默认成员
- import不是解构对象
webpack模块加载方式
- 遵循ES Module的import声明
- 遵循Common JS的require函数
- 遵循AMD的define和require函数
- 样式代码中@import指令和URL函数
- html中img的src属性
devtool几种模式对比
- eval执行模块代码
- cheap-source-map是否包含行信息
- module能否得到loader处理之前的代码
几个坑
html-webpack-plugin配合自定义模板要加上html-loader规则
webpack版本选择4,webpack cli选择3
