webpack中webpack.config.js的使用

朴灿烈づ我的快乐病毒、 2022-04-18 05:43 610阅读 0赞

### 文章目录 ###

*  webpack.config.js的作用：
 *  示例
 *   *  源码
     *  运行结果
     *  分析

# webpack.config.js的作用： #

`webpack.config.js`是`webpack`打包的默认配置文件，其默认位于项目的根目录中。

比如说如果我们在控制台中输入`webpack`指令，后面不跟任何参数的话，则`webpack`默认查找位于根目录中的`webpack.config.js`文件，并根据该文件加载与执行相应的依赖。

# 示例 #

下面的源码，直接在控制台中将光标定位于项目的根目录，然后运行下面的代码即可成功打包项目。

webpack

在控制台中打包后的结果：

![在这里插入图片描述][20181109112559556.png]

## 源码 ##

项目结构：

![在这里插入图片描述][20181109111313850.png]

`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'
        }
    };

## 运行结果 ##

![在这里插入图片描述][20181109111421663.png]

## 分析 ##

从上面的代码中，我们可以看到，在正常的项目中已经出现了目录层级变化，其中`src`文件夹下存放的是项目源码，而`dist`出存放的是编译后的可执行文件，而我们项目中所有引入文件路径的写法都得注意当前的目录结构，并依据当前的目录结构做出相应的更改。比如说在`index.html`中所引入的文件路径就是由之前的`build.js`更改成现在的`dist/build.js`。

在我们的配置文件`webpack.config.js`中，由于其本身就是一个`js`文件因而其可以像在`js`中一样编写相应的代码，比如说这里就使用了`module.exports`导出函数。其中的`entry`关键字指明了打包的入口文件，而`output`则指明了该打包后的编译文件存放位置。

[20181109112559556.png]: /images/20220418/ba74f42d254b4c5984a58618c5379ba8.png
[20181109111313850.png]: /images/20220418/9c4b384e80964e2a8ef5461f8e2908d7.png
[20181109111421663.png]: /images/20220418/b98586bba3884e2095b8eb3ab4b832cd.png