1，什么是webpack？
概念：webpack是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性，性能优化等强大的功能。
好处：让程序员吧工作的中心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。
2，安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
3，在项目中配置webpack
① 在项目根目录中，创建名为 webpack.config.js的webpack配置文件，并初始化如下的基本配置：
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
//mode 用来指定构建模式，可选值有 development 和 production
// 开发时使用 development 打包速度快，体积大
// 上线的时候使用 production 打包速度快， 体积小
mode: 'development',
};
② 在package.json的script节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack"
}
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
运行之后会在项目中自动生成一个dist文件，我们后续只需要导入dist文件下的main.js文件即可
4，自定义打包的入口与出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
示例代码如下：
const path = require('path');
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
//mode 用来指定构建模式，可选值有 development 和 production
mode: 'development',
// entry:'指定要处理那个文件'
entry: path.join(__dirname, './src/index.js'),
// output 指定生成的文件存放在哪里
output: {
// 存放目录
path: path.join(__dirname, 'dist'),
// 生成的文件名
filename: 'main.js',
},
};
1，webpack插件的作用
常用插件：
2，安装配置 webpack-dev-server
安装：
运行命令安装插件：npm install webpack-dev-server -D
webpack 4 以上我们还需要安装webpack-cli
npm install webpack-cli -D
配置：
① 新增 webpack.config.js 中的 devServer命令：
// 监听文件改动，自动打包 // watch: true,
devServer: {
static: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲
compress: true, // 压缩资源
port: 9000, // 指定服务器的端口号
open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开
}
webpack版本4以上的在package.json内配置如下
"scripts": {
"dev": "webpack",
"dev-serve": "webpack serve"
}
② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址查看自动打包效果
修改引入文件
***注意：webpack-dev-server 会启动一个实时打包的http服务器
3，安装 html-webpack-plugin
安装：
npm install html-webpack-plugin -D
配置：
① webpack.config.js文件中新增配置如下代码
const HtmlPlugin = require('html-webpack-plugin');// 导入 html-webpack-plugin 插件，得到插件的构造函数
// nwe 构造函数，创建插件的示例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', //指定要复制那个页面
filename: './index.html', //指定复制出来的文件名和存放路径
});
② webpack.config.js文件module.exports中新增
module.exports = {
// 插件的数组，将来webpack在运行时，会被加载并调用这些插件
plugins: [htmlPlugin],
}
4，webpack 中的loader插件
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!
loader加载器的作用:协助webpack 打包处理特定的文件模块。比如:
Ⅰ，安装打包处理css文件
① 运行 npm i style-loader -D和npm i css-loader -D，安装处理css文件的loader
② 在wenpack.config.js的module -> rules数组中，添加loader规则如下
module:{ // 所有第三方文件模块的匹配规则
rules:[ // 文件后缀名的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
其中，test表示匹配的文件类型，use表示对应要调用的loader，顺序是固定的，多个loader的调用顺序是：从后往前调用。
Ⅱ，安装打包处理less文件
① 运行 npm i less-loader less -D命令
② 在webpack.config.js的 module ->rules数组中，添加loader规则如下：
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
Ⅲ，安装打包处理样式表中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格式的图片
Ⅳ，打包处理js文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级JS语法，需要借助于 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/'}
② 在项目根目录下，创建名为 babel.config.js 的配置文件，定义Babel的配置项如下：
module.exports={
// 声明 babel 可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}
配置webpack的打包发布
在package.json文件的，scripts节点下，新增build命令如下：
"scripts":{
"build":"webpack --mode production" //项目发布时，运行build命令
}
–mode 是一个参数项，用来指定webpack 的运行模式。production代表生产环境，进行代码压缩和性能优化。
注意：通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的model 选项。
优化dist文件夹打包
① 吧JavaScript 文件统一生成到JS目录中
在webpack.config.js 配置文件的output节点中，进行如下的配置：
output: {
// 生成的文件名
filename: 'js/bundle.js',
// 存放目录
path: path.join(__dirname, 'dist'),
}
② 吧图片文件统一生成到 image 目录中
修改webpack.config.js中的module ->rules配置项，修改指定图片文件的输出路径：
{
test: /\.jpg|png|gif$/,
use: 'url-loader?limit=22229&outputPath=images', //在配置多个参数之间，使用&符号进行分割
},
③ 运行build命令时自动删除旧的dist文件夹
安装：npm install --save-dev clean-webpack-plugin
配置：在webpack.config.js文件中，新增 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
修改plugins数组内容 plugins: [htmlPlugin, new CleanWebpackPlugin()],
1，什么是Source Map
Source Map 就是一个信息文件，里面储存着位置信息，也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
作用：出错的时候，除错工具将直接显示原始代码，而部署转换后的代码，能够极大的方便后期的调试。
开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数，与源代码的行数不一致的问题，示意图如下：
解决默认Source Map的问题
开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：
module.exports = {
// 此配置生成的Source Map能够保证运行时报错的行数与源代码的行数保持一致
devtool: 'eval-source-map', //在发布项目时,出于安全考虑应禁用此行代码
}
另一种方式，只定位行数不暴漏源码
在webpack.config.js中添加如下的配置
resolve: {
alias: {
// 告诉webpack，@符号表示src这一层目录
'@': path.join(__dirname, './src/'),
},
},
vue_devtools调试工具
点击详情，
