Webpack手动打包

1.Webpack打包

1.目录结构

2.搭建与运行

1.新建mathUtils.js文件

定义函数并导出

function add(num1,num2){
    return num1+num2;
}
function mul(num1,num2){
    return num1 *num2
}
module.exports = {
    add,mul
}

2.新建main.js文件

// 1.使用commonJS规范
const {add,mul} = require("./mathUtils")
console.log(add(20,30));
console.log(mul(20,30));
​

3.新建info.js文件

export const name= "xj";
export const age = 18;
export const height = 1.88;

4.在main.js文件添加

// 2.使用ES6模块化规范导入
import { name,age,height } from "./info";
console.log(name);
console.log(age);
console.log(height);

5.使用webpack打包

使用cmd进入

E:\Vue\LearnVuejs04-v2\01-webpack使用\02-webpack的起步>webpack ./src/main.js ./dist/bundle.js
//指定main文件入口，并指定打包后的文件地址

6.index.html文件引用打包后的文件

值得注意的是当文件改动时需要再次运行步骤5的打包命令

<script src="./01-webpack使用/02-webpack的起步/dist/bundle.js"></script>