webpack的HelloWorld

最新推荐文章于 2023-09-27 17:00:32 发布

张侦毅

最新推荐文章于 2023-09-27 17:00:32 发布

阅读量243

点赞数

分类专栏： Vue Vue 文章标签： webpack 资源打包

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/83892661

版权

Vue 同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

Vue

39 篇文章 4 订阅

订阅专栏

文章目录

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>