1、概述
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
中文官方网站：https://www.webpackjs.com/ 打包的作用：
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。2、Webpack四个核心概念(四个核心会写在配置文件里webpack.config.js)
入口(entry)
webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，
寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据- 输出(output)
出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。加载器（loader）
webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），
例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。插件(plugins)
插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，
或者是对打包功能进行优化、压缩，提高效率。3、安装
安装后在package.json中会有vue-router和webpack-cli
4、打包js
4.1、编写配置文件webpack.config.js
配置文件里指定入口和出口、加载器、插件、不过加载器和插件是可选的
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path: __dirname+'/dist', //出口目录
filename: 'build.js' //输出的js文件名
},
}4.2、入口entry
在src下新建一个main.js、把原来html中的js代码全部移动到main.js中
main.js
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'
import './css/main.css'
Vue.use(VueRouter)
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写多个路由规则
{
path:"/login", // 请求路径
component:loginForm // 组件名称
},
{
path:"/register",
component:registerForm
},
]
})
var vm = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router
})login.js
//登录模板
const loginForm = {
template:`\
<div>\
<h2>登录页面</h2>\
用户名：<input type="text" ><br/>\
密码：<input type="password"><br/>\
</div>\
`
}
export default loginForm;register.js
//注册模板
export default {
template:`\
<div>\
<h2>注册页</h2> \
用户名：<input type="text"><br/>\
密码：<input type="password"><br/>\
确认密码：<input type="password"><br/>\
</div>\
`
}这样、main.js就成了整个配置的入口了
4.3、出口output
在根目录下新建目录dist、用于在配置文件中配置出口目录
4.4、执行换打包：
npx webpack --config webpack.config.js
查看dist目录 ：如果有build.js说明打包成功
4.5、测试
index.html、引入build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--router-link来指定跳转的路径-->
<span><router-link to="/login">登录</router-link></span>
<span><router-link to="/register">注册</router-link></span>
<hr/>
<div>
<!--vue-router的锚点-->
<router-view></router-view>
</div>
</div>
<script src="../dist/build.js"></script>
</body>
</html>
