1.webpack入门程序
入门程序总结:webpack可以将js分模块开发，开发完成对各模块代码打包成一个统一的文件
1.1webpack开发过程
1.1.1)定义一个分模块的js文件
1.1.2)定义一个主模块的js文件main.js(名称任意)
1、在此文件中会引用分模块js
2、引用vue.min.js（它也一个分模块）
3、将html页面中构建vue实例的代码放在main.js中。
1.2webpack命令打包js文件
1.2.1)webpack main.js build.js ，这段指令表示将main.js打包输出为 build.js文件
执行完成，观察程序目录是否出现build.js。
1.2.2)在html中引用build.js
2.webpack-dev-server
webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。
2.1webpack-dev-server的安装,下载依赖
执行以下命令:安装依赖包
cnpm install [email protected] [email protected] [email protected] --save-dev
2.2webpack-dev-server的安装,修改配置文件
在package.json中配置script
{
"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"
}
}
2.3创建webpack.config.js
2.3.1)配置模板文件,去除script,插件会自动引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>hello vue</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">
<span v-text="name"></span>
</a>
<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>
</html>
2.3.2)创建webpack.config.js 文件
//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
2.4启动测试
2.5debug调试
2.5.1)配置文件加
devtool: 'eval-source-map',
2.5.2)js文件里面加
debugger