1.使用nodejs中的npm下载webpack
npm install [email protected] -g
下载完成后，可以查看版本
2.案例
mathUtils.js 导出模块
function add(arg1, arg2) {
return arg1 + arg2;
}
function sub(arg1, arg2) {
return arg1 - arg2;
}
export {
add,sub
}
main.js 导入模块
import {
add,sub} from './mathUtils.js'
console.log(add(10,20));
console.log(sub(50,20));
当直接使用main.js时会包错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./src/main.js"></script>
<body>
</body>
</html>
使用webpack解决
在控制台中输入
webpack .\src\main.js .\dist\bundle.js
之后修改src目录文件即可
<script src="./dist/bundle.js"></script>
在前期测试时可以在script加入type = ‘module’ 来测试，发布时再用webpack打包发布在服务器