webpack的HelloWorld

今天药忘吃喽~ 2022-04-18 05:39 156阅读 0赞

### 文章目录 ###

*  webpack的语法
 *  示例
 *   *  源码
     *  运行结果
     *  分析

# webpack的语法 #

`webpack`的基本用法：

webpack + 所需打包的文件名 + 打包后的文件名

比如说我们所打包的源文件名为`main.js`而其打包后的名为`build.js`，所以说其打包指令为：

webpack main.js build.js

# 示例 #

这里以简单的实现一个计算器为例来进行说明。

在项目根目录中，拷贝下面的代码，将控制台中的光标定位于该项目根目录，运行下面的打包命令：

webpack main.js build.js

之后打开浏览器，在浏览器中我们就可以访问刚才所编写的计算器了。

## 源码 ##

`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="build.js"></script>
    </html>

## 运行结果 ##

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

## 分析 ##

从上图我们可以看出，其能够实现`1+2=3`的计算操作，这说明我们的计算器本身是运行成功的。

上面源码的`calc.js`文件是项目的依赖模块，在这里，其主要实现的是计算器的核心计算功能，其通过`module.exports`将定义于其内的函数`add`导出。

上面源码的`main.js`，其主要起到一个资源调度的作用，比如说我们刚才的代码中，其就引入了`calc.js`模块。同时，其还是`webpack`的打包入口文件，由于以后项目中的所有文件，包括`js`、`css`等的统统都要通过`main.js`引入方能成功打包。

上面源码在打包后会生成一个`build.js`文件，该文件是打包后的编译文件，而我们的`HTML`页面如若想使用计算器功能，其就必须得引入该打包后的文件，即引入`<script src="build.js"></script>`代码。

[20181109100558458.png]: /images/20220418/e03969dce0014e57ac68fad197c0ab5f.png