一、什么是Webpack
webpack被定义为现代 JavaScript 应用程序的静态模块打包器(module bundler)，是目前最为流行的JavaScript打包工具之一。
静态模块：指的是编写代码过程中的，html,css,js,图片等固定内容的文件
打包：把静态模块内容，压缩，整合，转译等（前端工程化）
1.把less/sass转成css代码
2.把ES6+降级成ES5
3.支持多种模块标准语法
二、使用Webpack
需求：封装utils包，校验手机号长度和验证码长度，在src/index.js中使用并打包观察
步骤：
1.新建并初始化项目，编写业务代码
2.下载webpack webpack-cli到当前项目中(版本独立),并配置局部自定义命令
3.运行打包命令，自动产生dist分发文件夹(压缩和优化后，用于最终运行的代码)
注意：build是可以随着自己定义名称的，但后面的webpack是固定死的
三、修改Webpack打包入口和出口
步骤：
1.项目根目录，新建webpack.config.js配置文件
2.导出配置对象，配置入口，出口文件的路径
3.重新打包观察
注意：只有和入口产生直接/间接的引入关系，才会被打包
四、案列（用户登录-长度判断）
需求：点击登录按钮，判断手机号和验证码长度
步骤：
1.准备用户登录页面
2.编写核心JS逻辑代码
3.打包并手动复制网页到dist下，引入打包后的JS运行
核心：Webpack打包后的代码，作用在前端网页中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑马头条-数据管理平台</title>
</head>
<body>
<!-- 警告框 -->
<div class="alert info-box">
操作结果
</div>
<!-- 登录页面 -->
<div class="login-wrap">
<div class="title">黑马头条</div>
<div>
<form class="login-form">
<div class="item">
<input type="text" class="form-control" name="mobile" placeholder="请输入手机号" value="13888888888">
</div>
<div class="item">
<input type="text" class="form-control" name="code" placeholder="默认验证码246810" value="246810">
</div>
<div class="item">
<button type="button" class="btn btn-primary btn">登 录</button>
</div>
</form>
</div>
</div>
</body>
</html>//1.1准备项目和源代码
import { checkPhone, checkCode } from "../utils/check.js"
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
//编写核心JS逻辑代码
document.querySelector('.btn').addEventListener('click', () => {
const phone = document.querySelector('.login-form [name=mobile]').value
const code = document.querySelector('.login-form [name=code]').value
if (!checkPhone(phone)) {
console.log('手机号长度必须是11位')
return
}
if (!checkCode(code)) {
console.log('验证码长度必须是6位')
return
}
console.log('提交到服务器登录......')
})
五、自动生成html文件
步骤：
1.下载html-webpack-plugin本地软件包
2.配置webpack.config.js让Webpack拥有插件功能
3.重新打包观察效果
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//入口
entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前，清空输出目录
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/login.html'),//模板文件
filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
})
]
};
