本文共 2303 字，大约阅读时间需要 7 分钟。

场景：打包webpacktest02项目中的vue_01.html的js

一、一 开始的文件目录（红色被我抹掉的是后面安装或创建的）：

2、src文件夹是存放打包的js资源

// main.js表示webpack程序开启的程序入口// 先导入需要打包的文件var {add} = require("./model01.js");var Vue = require("./vue.min.js");// 把打包文件的Js复制到此处var VM1 = new Vue({    el:"#app",//表示当前vue对象接管app的div区域    data:{        name:'黑马程序员',// 相当于是MVVM中的Model这个角色        num1:'',        num2:'',        result:'',        list:[1,2,3,4,5],        user:{name:"huang", age:10},        userlist:[             {user:{name:"huang1", age:10}},            {user:{name:"huang2", age:20}},            {user:{name:"huang3", age:30}}        ]    },    mounted:function() {        // alert("VM1");    },    methods:{        abc: function(){            // alert("计算");            this.result = add(this.num1, this.num2);            // this.result = this.num1 + this.num2;        },        acc: function(){            alert("22222");            // this.result = this.num1 + this.num2;        }    }});

model01.js:（js代码的方法）

var add = function(x, y){    return x + y + 1;}var add1 = function(x, y){    return x + y;}// 导出add方法// module.exports.add = add;// module.exports.add2 = add2;module.exports ={add};//如果有多个方法这样导出

vue.min.js就是引用vue的包了

二、进入项目目录打开cmd 输入

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

一次性本地安装 webpack 3.6.0版本 webpack-dev-server 2.9.1版本 html-webpack-plugin 2.30.1版本

安装成功后就会生成

node_modules文件夹 package.json文件了

{  "scripts":{   "dev": "webpack-dev-server --inline --hot --open --port 5008"  },  "devDependencies": {    "html-webpack-plugin": "^2.30.1",    "webpack": "^3.6.0",    "webpack-dev-server": "^2.9.1"  }}

本目录下创建 webpack.config.js：

var htmlwp = require('html-webpack-plugin');module.exports = {    entry: './src/main.js', //指定打包的入口文件    output: {        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径        filename: 'build.js' //输出文件    },    plugins: [        new htmlwp({            title: '首页', //生成的页面标题            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能            template: 'vue_01.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)        })    ]}

然后进入到项目目录下cmd， 运行 npm run dev就能运行成功！ 自动打包好的build.js文件会自动导入vue01.html中。

转载地址：http://ofern.baihongyu.com/