版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83893891
文章目录
webpack.config.js的作用：
webpack.config.js是webpack打包的默认配置文件，其默认位于项目的根目录中。
比如说如果我们在控制台中输入webpack指令，后面不跟任何参数的话，则webpack默认查找位于根目录中的webpack.config.js文件，并根据该文件加载与执行相应的依赖。
示例
下面的源码，直接在控制台中将光标定位于项目的根目录，然后运行下面的代码即可成功打包项目。
webpack
在控制台中打包后的结果：
源码
项目结构：
calc.js源码：
//1、定义add函数
function add(x,y){
return x + y;
}
//2、导出add函数
module.exports = add;
main.js源码：
//1、获取dom对象
var v1 = document.querySelector('#v1');
var v2 = document.querySelector('#v2');
var bt = document.querySelector('#bt');
var res = document.querySelector('#res');
//2、获取calc.js中的add方法并且调用计算结果
bt.onclick = function () {
//获取输入数值并将其转换成浮点型数据
var val1 = parseFloat(v1.value);
var val2 = parseFloat(v2.value);
//引入calc.js模块
var add = require('./calc');
//调用其中的add方法，实现计算功能
res.value = add(val1,val2);
};
index.html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<input type="text" id="v1"> +
<input type="text" id="v2">
<input type="button" id="bt" value="=">
<input type="text" id="res">
</body>
<script src="dist/build.js"></script>
</html>
webpack.config.js源码：
module.exports = {
entry:'./src/main' //指定打包的入口文件
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
};
运行结果
分析
从上面的代码中，我们可以看到，在正常的项目中已经出现了目录层级变化，其中src文件夹下存放的是项目源码，而dist出存放的是编译后的可执行文件，而我们项目中所有引入文件路径的写法都得注意当前的目录结构，并依据当前的目录结构做出相应的更改。比如说在index.html中所引入的文件路径就是由之前的build.js更改成现在的dist/build.js。
在我们的配置文件webpack.config.js中，由于其本身就是一个js文件因而其可以像在js中一样编写相应的代码，比如说这里就使用了module.exports导出函数。其中的entry关键字指明了打包的入口文件，而output则指明了该打包后的编译文件存放位置。