第一部分：webpack的学习
前端工程化的四个现代化
模块化/组件化/规范化/自动化
目前主流化的前端工程化解决方案
1.webpack(www.webpackjs.com) 2. parcel (zh.parceljs.org/)
webpack 是前端工程化的具体解决方案
主要功能:前端模块化开发支持，代码压缩混淆，处理浏览器JS兼容性，性能优化等
好处：让程序员把工作重心放到具体功能实现上，提高开发效率和项目可维护性
二.案例创建列表隔行变色项目
1.新建空白目录，运行npm init-y,初始化包管理配置文件package.json
2.新建src源代码目录
3.新建index.html首页和index.js脚本文件
4.初始化首页基本结构
5.运行npm install jquery -S命令，安装JQ
6.通过ES6模块化导入JQ,实现隔行变色
三，在项目中安装webpack
安装两个包
1. npm install [email protected] [email protected] -D
在项目根目录创建webpack.config.js并且初始化配置（初始化配置见文件内）
module.exports = {
mode:'development' // 开发模式 可选值 development 和 production 生产模式
}
2.在package.json的scripts节点下,新增dev脚本如下
"dev":"webpack"
这里新增的dev名称可变，webpack值为固定
如果希望运行脚本 可终端输入 npm run dev (脚本名称)---这样就实现了打包JS的文件
生成了dist文件夹，内有被生成的main.js文件
引入main.js到HTML中，就实现了隔行变色
注意---运行其他脚本也是一样 如 npm run build
4.1 开发环境和生产环境的区别
1.development
开发环境不会对生成文件压缩和优化性能，打包速度快
2.production
会对打包文件进行代码压缩和性能优化
打包速度慢
webpack.config.js是webpack的配置文件，webpack在开始打包之前读取这个文件，基于给定的配置打包
注意：由于webpack是基于node.js开发出来的工具，所以支持node.js相关语法进行个性化配置
4.3 webpack中的默认约定
默认打包入口文件为src>index.js
默认输出文件路径 dist>main.js
注意：可以在webpack.config.js中修改默认约定
4.4 自定义 通过 entry 节点指定入口
1. 导入node.js中专门操作路径的模块 const path = require('path')
entry:path.join(_dirname,'./src/index.js') //打包入口文件路径
通过 output 节点指定打包出口
output:{
path:path.join(_dirname,'./dist') // 输出路径
filename:'bundle.js' // 输出文件的名称
}
webpack插件
npm i [email protected] -D
修改源代码会自动进行打包构建
修改配置packge.json 'dev':"webpack serve"
这时存放的文件是放在了内存中，所以并不会实时刷新页面，是虚拟的，看不见的文件
直接src到 /main.js(一个看不到却存在的打包文件)，就可以实时刷新
http://localhost:8080/src/
3. html-webpack-plugin
通过此插件自定制页面内容
// 1.导入插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
2.创建插件的实例对象(注意大小写！！！)
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', // 指定原文件的存放路径
filename:'./index.html' // 指定复制生成文件的存放路径
})
3.使用插件
module.exports = {
mode:'development',
plugins:[htmlPlugin] // 通过 plugins 节点，使 HtmlPlugin 插件生效
}
// 复制出来的文件，也是被放到了内存中，自动注入了打包好的JS文件，所以原来的引入可以删除
4.devServer 节点 (webpack.config.js)
devServer:{
open:true, //初次打包完成后，自动打开浏览器
host:'127.0.0.1', // 实时打包所用主机地址
port:8080 //实时打包所使用的端口号
}
webpack 中的 loader
开发中，webpack默认只能打包处理.js为后缀的模块，非.js结尾，需要调用loader加载器打包
css-loader 处理.css npm i [email protected] [email protected] -D
less-loader 处理.less
babel-loader 打包处理webpack无法处理的高级JS语法
3. 打包处理css文件
1.运行
npm i [email protected] [email protected] -D ，安装处理CSS的 loader
2. 在 webpack.config.js 的 module->rules 数组中 ，添加规则
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
注意: 数组中的顺序是固定的，不能改变位置
test 表示匹配的文件类型 use 表示处理方式
4.打包处理less文件
1. 运行 npm i [email protected] [email protected] -D
2.在 webpack.config.js 的 module->rules 数组中 ，添加规则
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
5.打包处理样式表中与URL路径相关的文件，如图片等
1.运行 npm i [email protected] [email protected] -D
2. 在 webpack.config.js 的 module->rules 数组中 ，添加规则
module:{
rules:[
{test:/\.jpg|png|gif$/,use:"url-loader"}
]
}
注意：如何为url-loader添加参数项，为了提高网页性能，可把图片转为 base64
{test:/\.jpg|png|gif$/,use:"url-loader?limit=22229"}
?之后是loader的参数项
limit 是用来指定图片大小 ，单位字节
只有图片小于等于 limit ，才会被转为 base64 图片
改造：带参数的loader 还可以通过对象的方式 进行配置
module:{
test:/\.jpg|png|gif$/,
use:{
loader:'url-loader',
options:{
limit:22229
}
}
}
6.打包处理js文件中的高级语法
1.运行安装 npm i [email protected] @babel/[email protected] @babel/[email protected] -D
{
test:/\.js$/,
//exclude 为排除项，
// 表示babel-loder只处理开发者编写的JS文件，不需要处理 node_modules 下的JS
//这样处理速度会变得更快
exclude:/node_modules/,
use:{
loader:'babel-loader',
options:{ //参数项
// 声明一个 babel 插件 ，此插件 用来转化 class 中的高级语法
plugin:['@babel/plugin-proposal-class-properties']
}
}
}
1.打包发布-----
为什么需要对项目打包发布
1.开发环境下，打包生成的项目存放于内存，无法获取到最终打包生成的文件
2.开发环境下，打包生成的文件不会对代码压缩和性能进行优化
2.配置webpack的打包发布
在package.json文件的 script 节点下 新增 build 命令
"script":{
"dev":"webpack serve", //开发环境中 运行dev 命令
"build":"webpack --mode production" //发布项目 运行build
}
注意：通过 --mode 指定参数项，会覆盖 webpack.config.js 中的 model
npm run build 进行打包即可
3.打包后的文件整理
1.把JS文件统一到JS目录中,webpack.config.js 配置
output:{
path:path.join(_dirname,"dist"),
// 明确告诉wenpack 把生成的 index.JS 文件 存放于dist 目录下的 JS 目录
filename:'js/index.js'
}
4.把图片文件统一生成到image目录
修改 webpack.config.js 中的 url-loader 配置项，options 下新增 outputPath:'image'
5.自动清理dist 目录下的旧文件
1.安装 clean-webpack-plugin
npm install [email protected] -D
2. 按需导入 创建插件实例对象
const {CleanWebpackPlugin} = require('clean-webpakc-plugin')
const cleanPlugin = new CleanWebpackPlugin()
3. 把创建的实例对象 挂载到 plugins 节点
plugins:[htmlPlugin,cleanPlugin] // 挂载插件
到此每次打包时 就会自动清除旧文件
---------------------------------------------------------------------
Source Map 介绍
前言--前端项目投入生产环境，对代码进行压缩混淆，除错就变得困难
Source Map是一个信息文件 存储着位置信息，存储着代码压缩混淆前后的对应关系
有了它，出错时候，除错工具将直接显示原始代码，方便后期调试
开发环境下，webpack 已经默认启用了 Source Map,控制台会有 提示
但 Source Map 提示的报错显示行 是编译后文件的报错行数
1.解决默认 Source Map 报错行数的问题
开发环境下 可在webpack.config.js 添加配置 devtool:'eval-source-map'
module.exports={
mode:'development',
devtool:'eval-source-map' // 仅限开发模式使用，即可对应报错行数
}
生产环境下 默认生产环境不会包含 Source Map，为了防止黑客攻击
这时候需要 只定位行数 不暴漏源代码 devtool:'nosources-source-map'
定位报错行并展示源代码 devtool:'source-map' (不安全)
在实际开发中 需要自己配置 webpack 吗？ （不需要）
会使用CLI工具去一键生成 ，但必需要掌握修改和看懂webpack的各种配置