webpack的基本使用

一、创建的文件结构

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