模块打包工具——webpack的简单使用

1.使用nodejs中的npm下载webpack

npm install webpack@3.6.0 -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打包发布在服务器