概述 Webpack 模块打包工具
Webpack 是一个现代的静态模块打包工具，用于将前端应用程序的各种资源（例如如：JavaScript、CSS、图片等）视为模块，并将它们打包成可以在浏览器中运行的静态文件。它的主要功能包括模块打包、资源优化、代码分割、加载器转换等。
Webpack 官方网址：https://webpack.js.org/
Webpack 在内部会构建一个依赖图（dependency graph），这个依赖图映射到项目所需的每个模块，并生成一个或多个 bundle。在打包过程中，Webpack 可以进行各种优化，如代码压缩、文件合并、按需加载等，以提高应用程序的性能和加载速度。
Webpack 的配置包括入口（entry）、出口（output）、加载器（loader）和插件（plugins）。入口决定了 Webpack 从哪个模块开始生成依赖关系图，而出口则指定了生成的静态文件的输出目录。加载器用于转换不同类型的模块，以便能够被打包和引用，而插件则用于执行更广泛的任务，如代码分割、资源优化、生成 HTML 文件等。
为了进一步提高 Webpack 的打包速度，可以使用一些优化技巧，如使用线程加载器（例如：thread-loader）来启用多线程打包，或者使用缓存加载器来缓存已经编译过的文件，从而避免重复编译。总的来说，Webpack是一个强大而灵活的工具，能够帮助开发者更高效地构建和优化前端应用程序。
下载安装 Webpack 环境
安装 Node.js 环境
访问 Node.js 官网，下载并安装适合你操作系统的Node.js版本。安装完成后，你可以在命令行中运行 node -v 来检查 Node.js 是否安装成功，以及安装的版本。
初始化项目
在你的项目文件夹中，打开命令行窗口，并输入 npm init 来初始化一个新的 npm 项目。这会创建一个 package.json 文件，这个文件会保存你的项目依赖和其他配置信息。
全局安装 webpack webpack-cli
NPM 进行全局安装 webpack webpack-cli
npm install webpack webpack-cli -g
全局安装意味着你可以在任何地方使用 webpack 和 webpack-cli 命令。然而对于大多数项目，推荐进行局部安装，以避免不同项目之间的版本冲突。
局部安装 webpack webpack-cli
如果你选择局部安装在项目的根目录下运行如下：
npm install webpack webpack-cli --save-dev
这样 webpack 和 webpack-cli 就会被添加到你的 package.json 文件的 devDependencies 部分，成为项目的开发依赖。
使用 Webpack 流程图
配置 webpack.config.js 入口 entry 出口 output
const path = require("path")
module.exports = {
entry: "./src/main.js",
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js"
}
}
配置 package.json script 脚本
{
"description": "",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
}
}
打包流程图
注意：所有要被打包的资源都要跟入口产生直接 / 间接的引用关系。
使用 Webpack 打包静态网页
Webpack 本身并不直接处理 HTML 文件，但是你可以使用 html-webpack-plugin 插件来简化静态 HTML 文件的打包过程。使用 html-webpack-plugin 来简化静态 index.html 文件的打包过程了。
如何使用 html-webpack-plugin 来打包静态 index.html 的步骤：
安装必要的插件和依赖
在你的项目中，首先确保已经安装了 webpack 和 webpack-cli。安装 html-webpack-plugin：
npm install --save-dev html-webpack-plugin
配置 webpack.config.js
在你的 webpack.config.js 文件中，引入 html-webpack-plugin 并添加到 plugins 数组中：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
})
],
};
编写 index.html
在你的源代码目录（在这个例子中是 src）中，创建一个 index.html 文件。这个文件将被 html-webpack-plugin 用作模板，并且插件会自动将你的打包后的 JavaScript 文件（例如 main.js）注入到这个 HTML 文件中。
运行 webpack
当运行 webpack 构建过程时，html-webpack-plugin 会自动处理你的 index.html 文件，并将它输出到你的构建目录（默认为 dist）中。
注意事项
确保你的 HTML 文件中引用了正确的脚本和样式文件路径。在开发环境中，你可能直接引用 src 目录下的文件，但在生产环境中，这些文件会被 webpack 打包并输出到不同的位置。你可以使用 webpack 的 publicPath 配置项来确保引用路径正确。
如果你的项目中有多个 HTML 文件需要打包，你可以为每个文件创建一个 HtmlWebpackPlugin 实例，并在 plugins 数组中添加它们。
启动本地服务 webpack-dev-server
启动本地服务，可实时更新修改的代码，打包变化代码到内存中，然后直接提供端口和网页访问。也就是说以后改了 src 目录下的资源代码，就会直接更新到内存打包，然后反馈到浏览器上了。
下载 webpack-dev-server
npm install webpack-dev-server -D
配置 package.json 自定义脚本
scripts: {
"build": "webpack",
"serve": "webpack serve"
}
运行脚本启动 webpack 开发服务器
npm run serve
使用 Webpack 打包 css 文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ "style-loader", "css-loader"]
}
]
}
}
匹配所有的 css 文件，use数组里从右向左运行，先用 css-loader 让 webpack 能够识别 css 文件的内容并打包，再用 style-loader 将样式，把 css 插入到 dom 中。
总结：webpack 默认只认识 js 文件和 json 文件。万物皆模块，引到入口才会被 webpack 打包，css打包进 js 中，然后被嵌入在 style 标签插入 dom 上。
style-loader 文档：https://webpack.docschina.org/loaders/style-loader/
css-loader 文档：https://webpack.docschina.org/loaders/css-loader/
