场景:打包webpacktest02项目中的vue_01.html的js
一、一 开始的文件目录(红色被我抹掉的是后面安装或创建的):
1、dist文件夹是用来存放打包后的js文件(build.js)
2、src文件夹是存放打包的js资源
main.js:(js代码, 我这里是vue)
// 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 [email protected] [email protected] [email protected] --save-dev
一次性本地安装 webpack 3.6.0版本 webpack-dev-server 2.9.1版本 html-webpack-plugin 2.30.1版本
安装成功后就会生成
node_modules文件夹 package.json文件了
修改 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: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
template: 'vue_01.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
然后进入到项目目录下cmd, 运行 npm run dev就能运行成功! 自动打包好的build.js文件会自动导入vue01.html中。