使用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.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>

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

使用webpack分模块打包程序

猜你喜欢