什么是 webpack
概念：webpack 是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性
能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。
基本使用
1. 创建项目
- 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
- 新建 src 源代码目录
- 新建 src -> index.html 首页和 src -> index.js 脚本文件
- 初始化首页基本的结构
2. 在项目中安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
配置webpack
在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
module.exports = {
// mode 代表 webpack 运行模式
mode: 'development' // mode 用来制定构建模式 可选值： development 和 production
}
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
mode 的可选值
mode 节点的可选值有两个，分别是：
- development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
- production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
webpack.config.js 文件的作用
webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，
从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。
webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：
const path = require('path')
module.exports = {
// entry 指定要处理那个文件
entry: path.join(__dirname, './src/index1.js'),
// output 指定生成文件的生成路径及文件名
output: {
path: path.join(__dirname, './dist'),
filename: 'main1.js'
}
}
webpack 中的插件
webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的
webpack 插件有如下两个：
- webpack-dev-server
- 类似于 node.js 阶段用到的 nodemon 工具
- 每当修改了源代码，webpack 会自动进行项目的打包和构建
- html-webpack-plugin
- webpack 中的 HTML 插件（类似于一个模板引擎插件）
- 可以通过此插件自定制 index.html 页面的内容
webpack-dev-server
webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建
npm install webpack-dev-server -D
// 如果安装太慢 可以加镜像
--registry=https://registry.npm.taobao.org
配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：
"scripts": {
"dev": "webpack serve"
},
② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：webpack-dev-server 会启动一个实时打包的 http 服务器
版本如下：
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
html-webpack-plugin
可以通过此插件自定制 index.html 页面的内容。
需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份
npm install html-webpack-plugin@5.3.2 -D
// 如果安装太慢 可以加镜像
--registry=https://registry.npm.taobao.org
配置 webpack-dev-server
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', // 指定源文件的存放路径
filename: './index.html' // 指定生成文件的存放路径
})
module.exports = {
plugins: [htmlPlugin],
}
devServer 节点
在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服 务器，否则最新的配置文件无法生效
