使用webpack分模块打包程序小demo

最新推荐文章于 2024-04-11 22:43:29 发布

改变世界的猿

最新推荐文章于 2024-04-11 22:43:29 发布

阅读量1k

点赞数

分类专栏： nodejs webpack 文章标签： nodejs webpack

本文链接：https://blog.csdn.net/weixin_43794897/article/details/84958135

版权

nodejs 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

使用webpack分模块打包程序

1.在webtest目录下创建model.js

//定义add函数
function add1(x,y){
    return x+y;
}
function add2(x,y){
    return x+y+2;
}

//导出add方法
//单个方法可以这样导出
//module.exports.add1 = add1; 
//module.exports.add2 = add2;
//多个方法可以这样导出
module.exports = {add1,add2};

2.创建入口文件main.js，main.js文件是程序的主文件，该文件中包括如下内容
1）此文件中要引入model.js文件
2）此文件中要引入vue.min.js文件
3）包含原html的实例代码

var {add} = require('./model.js');
var Vue = require('./vue.min');
<!--编写vm以及model部分-->
var VM = new Vue({
    el:"#app",//相当于vue接管了app区域
    data:{
        num1:0,
        num2:0,
        result:0,
        url:'http://www.baidu.com'
    },
    methods:{
        change:function(){
        	//这里引用了model.js的add方法
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
        }
    }
});

3.进入主目录下，在命令行输入以下命令

webpack main.js build.js

会在该目录下面生成一个build.js文件
4.在原html中引入该build.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的测试程序</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num1"/>+
        <input type="text" v-model="num2"/>=
        <span v-text="result"></span>
        <button v-on:click="change">计算</button>
    </div>
</body>
    <script src="build.js"></script>
</html>

改变世界的猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用webpack分模块打包程序小demo

使用webpack分模块打包程序1.在webtest目录下创建model.js//定义add函数function add1(x,y){ return x+y;}function add2(x,y){ return x+y+2;}//导出add方法//单个方法可以这样导出//module.exports.add1 = add1; //module.exports...
复制链接

扫一扫