webpack基础
1.前端工程化
实际的前端开发：
- 模块化：（
js的模块化，css的模块化，资源的模块化） - 组件化：（复用现有的
UI结构，样式，行为） - 规范化：（目录结构的划分，编码规范化，接口规范化，文档规范化，
Git分支管理） - 自动化：（自动化构建，自动部署，自动化测试）
什么是前端工程化？
前端工程化：在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化
前端工程化解决方案？
webpack(https://www.webpackjs.com/)
2.webpack的基础使用
1.什么是webpack
概念：webpack是前端项目工程化的具体解决方案
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性，性能优化等强大的功能
2.webpack中的默认约定
在webpack4.x和5.x的版本中，有如下的默认约定：
① 默认的打包入口文件为src ->index.js
② 默认的输出文件路径为dist->main.js
注意：可以在webpack.config.js中修改打包的默认约定
3.自定义打包的入口与出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口
代码案例：
const path = require('path')
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
// 代表webpack运行的模式，可选值有两个development和production
// 结论：开发时候一定要哟个development,因为追求的是打包的速度，而不是体积
// 反过来，发布上线的时候一定能要用production,因为上线追求的是体积，而不是打包速度
mode: 'development',
// entry:'指定要处理哪个文件'
entry: path.join(__dirname, './src/index1.js'),
// 指定生成的文件存放在哪里
output: {
// 存放的目录
path: path.join(__dirname, './dist'),
// 生成的文件名
filename: 'bundle.js'
}
}
4.安装配置webpack-dev-server
安装webpack-dev-server之后一旦保存后可自动打包
安装命令：
npm install webpack-dev-server@3.11.2 -D
配置：
① 修改package.json->scripts中的dev命令如下：
"scripts":{
"dev":"webpack serve",//script 节点下的脚本，可以通过npm run执行
}
② 再次运行 npm run dev命令，重新进行项目的打包
③ 在浏览器中访问http://localhost:8080地址，查看自动打包效果
注意：webpack-dev-server会启动一个实时打包的http服务器
5.安装配置html-webpack-plugin
① 安装命令：
npm install html-webpack-plugin -D
② 配置html-webpack-plugin
// 1.导入html-webpack-plugin 这个插件，得到插件的构造函数（构造函数首字母大写）
const HtmlPlugin = require('html-webpack-plugin')
// 2.new 构造函数，创建插件的实例对象
const htmlplugin = new HtmlPlugin({
//指定要复制哪个页面
template:'./src/index.html',
//指定复制出来的文件名和存放路径
filename:'./index.html'
})
//3.插件数组，将来webpack在运行时，会加载并调用这些插件
module.exports = {
mode:'development',
...
plugins:[htmlplugin]
}
注意：① 通过HTML插件复制到项目根目录中的index.hmtl页面，也被放到了内存中
② `HTML`插件在生成`index.html`页面，自动注入了打包的`bundle.js`文件
5.devServer节点
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置
示例代码：
devServer:{
open:true,//初次打包完成后，自动打开浏览器
host:'127.0.0.1',//实时打包所使用的主机地址
port:80,//实时打包所使用的端口号，在http协议中，如果端口号是80,则可以被省略
}
注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效
3.webpack中的loader
1.loader概述
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了。需要调用loader加载器才可以正常打包，否则会报错
loader加载器的作用：协助webpack打包处理特定的文件模块，比如：
css-loader可以打包处理.css相关的文件
less-loader可以打包处理.less相关的文件
babel-loader可以打包处理webpack无法处理的高级JS语法
2.打包处理css文件
① 运行npm install --save-dev css-loader style-loader命令，安装处理css文件的loader
② 在webpack.config.js的module -> rules数组中，添加loader
代码如下：
module:{ //所有第三方文件模块的匹配机制
rules:[//文件后缀名的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
其中，test表示匹配的文件类型，use表示对应要调用的loader
注意：
-
use数组中指定的loader顺序是固定的 - 多个
loader的调用顺序是：从后往前调用
3.打包处理less文件
① 运行npm install less less-loader --save-dev命令
② 在webpack.config.js的module -> rules数组中，添加loader规则
代码如下：
module:{ //所有第三方我呢见模块的匹配规则
rules:[ //文件后缀名的匹配规则
{test:/\.less$/,use{'style-loader','css-loader','less-loader'}},
]
}
4.打包处理样式表中与url路径相关的文件
① 运行npm i url-loader file-loader -D命令
② 在webpack.config.js的module -> rules数组中，添加loader
代码如下：
module:{ //所有第三方文件模块的匹配规则
rules:[ //文件后缀名的匹配规则
{ test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'},
]
}
其中?之后是loader的参数项：
limit用来之地那个图片的大小，单位是子节(byte)
只有<=limit大小的图片，才会被转为base64格式的图片
5.webpack打包处理js文件中的高级语法
webpack只能打包处理一部分高级的Javascript语法。对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理
代码如下：
//1.定义了名为info的装饰器
function info(target) {
//2.为目标添加静态属性 info
target.info = 'Person info'
}
//3.为Parson类应用info装饰器
@info
class Person{}
//4.打印Person的静态属性info
console.log(Person.info)
6.安装babel-loader相关的包
运行如下的命令安装：
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
在webpack.config.js的module -> rules数组中，添加loader
代码如下：
//注意：必须使用exclude指定排除项,因为node_modules目录下的第三方包不需要被打包
{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
7.配置babel-loader
在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置如下：
module.exports = {
//声明babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}
4.webpack打包发布
1.配置webpack的打包发布
在package.json文件中的scripts节点下，新增build命令
代码如下：
"scripts":{
"dev":"webpack serve",//开发环境中，运行dev命令
"bulid":"webpack --mode production" //项目发布时，运行bulid命令
}
--mode是一个参数项，用来指定webpack的运行模式，production代表生产环境，会对打包生成的文件进行代码压缩和性能优化
注意：通过--mode指定的参数项，会覆盖webpack.config.js中的mode选项
2.把JavaScript文件统一生成到js目录中
在webpack.config.js配置文件的output节点中，进行如下配置：
output:{
path:path.join(__dirname,'dist'),
//明确告诉webpack把生成的bundle.js文件存放到dist目录下的js子目录中
filename:'js/bundle.js'
}
3.把图片文件统一生成到image目录下
修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：
{
test:/\.jpg|png|gif$/,
use:{
loader:'url-loader',
options:{
limit:2222,
//明确指定把打包生成的图片文件，存储到dist目录下的image文件夹中
outputPath:'image'
},
},
}
4,自动清理dist目录下的旧文件
为了每次打包发布时自动清理掉dist目录中的旧文件，可以按照并配置clean-webpack-plugin插件：
//1.安装清理dist目录的webpack插件
npm install clean-webpack-plugin -D
//2.按需导入插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
//3.把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin],//挂载插件
5.Source Map
1.什么是SourceMap
Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试
2.默认Source Map的问题
开发环境下默认生成的Source Map,记录的是生成后的代码位置。会导致运行时报错的行数与源代码的行数不一致的问题。如图所示：
<img src="C:\Users\28999\AppData\Roaming\Typora\typora-user-images\image-20221025212943919.png" alt="image-20221025212943919" style="zoom: 80%;" />
<img src="C:\Users\28999\AppData\Roaming\Typora\typora-user-images\image-20221025213038781.png" alt="image-20221025213038781" style="zoom:80%;" />
3.解决默认Source Map的问题
开发环境下，推荐在webpack.config.js中添加如下的配置，即可使运行时报错的行数与源代码的行数一致
代码如下：
module.exports = {
mode:'development',
//eval-source-map 仅限在”开发模式“下使用，不建议在生产模式下使用
//此选项生成的Source Map能够保证运行时的报错行数与源代码的行数保持一致
devtool:'eval-source-map',
...
}
4.webpack生产环境下的Source Map
在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露出去。
5.只定位行数不暴露源码
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码，可以将devtool的值设置为nosources-source-map
6.Source Map总结
① 开发环境下：
- 建议把
devtool的值eval-source-map - 好处：可以精准定位到具体的错误行
② 生产环境下：
- 建议关闭
Source Map或将devtool的值设置为nosources-source-map - 好处：防止源码泄露，提高网站的安全性
