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>