语言-页面-开发-webpack打包-基础

一、定义函数：

model01.js

// 定义add函数 
function add(x, y) { 
    return x + y
     }
// function add2(x, y) { 
    // return x + y+1 
    // } 
// 导出add方法 
module.exports.add = add; 

//如果有多个方法这样导出 
// module.exports.add2 = add2
//如果有多个方法也可以这样导出
// module.exports ={add,add2};

二、定义入口：

main.js

var {add} = require('./model01.js');//需要导入的js路径
var Vue = require('./../../../static/js/vue.js');//vue.js路径
var VM = new Vue({
    el: "#app", //表示当前vue对象接管app的div区域 
    data: {
        num1: 0,
        num2: 0,
        result: 0,
    },
    methods: {
        change: function() {
            //这里使用了导入的model01.js文件中的add方法 
            this.result = add(Number.parseInt(this.num1), Number.parseInt(this.num2))

        }
    }
});

三、打包

进入命令行窗口，进入到js所在目录

执行命令：

webpack main.js build.js

未执行：

执行后：生成了build.js文件

三、引用build.js文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="num1" />+
            <input type="text" v-model="num2" />=
            <input type="text" v-model="result" />
            <br />
            <button v-on:click="change">计算</button>
        </div>
        <script src="./../js/build.js" type="text/javascript" charset="utf-8"></script>

    </body>
</html>