一、创建的文件结构
dist：存放打包后的文件
src：存放我们写的源文件
main.js：项目的入口文件
mainUtils.js：数学工具函数
image.png
二、js打包
mainUtils.js
function add(num1,num2) {
return num1 + num2;
}
const name = 'aaa';
/*导出*/
module.exports = {
add,
name
}
main.js
//commanjs的导入方法
/*const {add,name} = require('./mainUtils.js')*/
//ES6的导入方法
import {add,name} from './mainUtils.js'
console.log(add(20,30));
直接在index.html中引入main.js和mainUtils.js是没有效果的，因为浏览器不能识别模块化的代码，所以需要webpack打包js，使模块化的代码转化成浏览器能够识别的代码，最后将打包后的js文件引入index.html即可。
三、打包过程
1.在cmd中进入目录
image.png
image.png
2.webpack命令
image.png
image.png
3.index.html中引入bundle.js
image.png
网友评论