- what？
webpack 是一个静态资源打包工具。
- 做什么的？
它以一个文件或者多个文件为入口，将项目中所有文件编译整合成一个或者多个文件输出。
- 有什么用：
- 可以将浏览器不能直接运行的语法进行转换
- 可以将 Dead Code 进行 TreeShaking 减少包的体积
- 可以通过打包压缩代码插件等优化包体积
- 有开发模式提供本地服务，热更新
- 可以做分包机制优化
- 可以通过插件完成对代码的二次优化比如去掉debugger和console等
- 学习使用它：
webpack 4之前的版本是包含命令行相关功能的，4版本开始，webpack的核心包不再包含命令行相关功能，放在了单独的webpack-cli中，需要自行安装。
不安装cli会报：
Error: Cannot find module 'webpack-cli/bin/config-yargs'
开始学习webpack5：
安装：
npm i webpack webpack-cli -D
开发模式打包 ： npx命令 可以将项目中的node_modules下的.bin 文件夹（如下随便截的图）临时加到环境变量中使我们可以用它的命令。否则需要配置全局的环境变量才能用。
//运行打包-开发模式
npx webpack ./src/main.js --mode=development
开发模式下 只编译ES模块化语法，不编译其他ES6语法（箭头函数等）
webpack的开发模式下默认使用了一个叫做 webpack-dev-server 的工具，它会提供一个小型的、快速的、实时更新、实时打包、实时编译 的开发服务器。并且会在内存中保留编译后的结果。
如果你的代码中包含了 ES6 的语法，并且没有通过 Babel 之类的转译器进行转译，那么在开发模式下，由于 webpack-dev-server 内置的 webpack 编译器会自动处理这些高级语法，所以你可能会觉得代码可以正常运行。
但是，这并不是推荐的做法。在生产环境中，你应该使用 Babel 等工具将 ES6 代码转译为 ES5 代码，以确保兼容性。
解决方法：
- 安装 Babel 和必要的 Babel 插件（如 @babel/preset-env）。
- 配置 .babelrc 或 babel.config.js 文件，设置目标环境和需要转译的语法特性。
- 更新你的 Webpack 配置文件，使用 babel-loader 替换默认的 loader，以便它可以处理 ES6 代码。
示例 .babelrc 配置：
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead"
}
]
]
}
示例 Webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
// ... 其他规则
]
},
// ...
};
通过这样的配置，你的项目将使用 Babel 来转译 ES6 代码，确保在老版本浏览器中的兼容性。
生产模式：生产模式会进行代码压缩，语法转换等
//运行打包-开发模式
npx webpack ./src/main.js --mode=production
本小结结语：
webpack自身可以通过命令行来处理打包js文件，但是项目中的css文件等其他文件是不能直接处理的，那么简单的命令行打包就不满足了，需要配置一个配置文件来利用插件等配置来更好的做打包配置满足项目的需要。
