webpack 打包js文件

将mode2.js模块及main.js（入口文件）文件编写完成，使用webpack对这些js文件进行打包

进入程序目录，执行

　命令：

　　webpack main.js webpackTest.js

　　这段指令表示将main.js打包输出为 webpackTest.js文件
然后html文件引用webpackTest.js 即可
 
 
//导入model2.js
var {add1} = require("./model2")
var Vue = require("./vue.min")
var VM = new Vue({
    el:'#app',//vm接管了app区域的管理
    data:{//model数据
        name:'简单计算器：',
        num1:0,
        num2:0,
        result:0
    },
    methods:{
        change:function () {
            this.result = add1(Number.parseInt(this.num1),Number.parseInt(this.num2))
        }
    }
});
main.js（入口文件）
var add = function (x, y) {
    return x+y;
}
var add2 = function (x, y) {
    return x+y+2;
}
exports.add1 = add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出
model2.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack测试</title>
</head>
<body>
<div id="app">
    <!--相当于MVVM的view视图-->
    <!--{{name}}-->
    <span v-text="name"></span>
    </a>
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
   <!-- <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <button v-on:click="change">计算</button>
</div>
</body>
<!--<script src="vue.min.js"></script>-->
<script src="webpackTest.js"></script>
<script>
    //编写MVVM中的model部分及VM（ViewModel）部分

</script>
</html>
运行的HTML文件

 

posted @ 2020-02-25 14:09  Angry-rookie  阅读(234)  评论(0)    收藏  举报