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:`\
登录页面
\
用户名：
\
密码：
\
\
`
}
export default loginForm;
register.js
//注册模板
export default {
template:`\
注册页
\
用户名：
\
密码：
\
确认密码：
\
\
`
}
这样、main.js就成了整个配置的入口了
4.3、出口output
在根目录下新建目录dist、用于在配置文件中配置出口目录
4.4、执行换打包：
npx webpack --config webpack.config.js
查看dist目录 ：如果有build.js说明打包成功
4.5、测试
index.html、引入build.js
Title
登录
注册
