用webpack是为了管理项目结构（依赖包）、动态开发和运行、打包部署、混淆压缩生产文件等等
初始化包管理命令：
npm init -y
当我们想要在项目使用jquery：
npm i jquery -S
npm安装时-S -D的区别是什么？
-S
即–save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。
如安装lodash：
npm i --save lodash
-D
即–dev（开发）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器。
注意：在使用npm install一个插件的时候，需要添加上-s或-d，不然不会在package.json中显示插件名称及版本号。
安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
在项目根目录创建webpack.config.js作为webpack的配置文件，内容如下：
// 使用node向外导出webpack的配置项
module.export = {
// webpack运行的模式：development production
// development仅仅做压缩处理
// production会压缩和性能优化
mode: 'development'
}
在package.json文件scripts节点下，增加dev的运行脚本：
"scripts": {
"dev": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
执行运行脚本
npm run dev
webpack 4.x和5.x默认的入口是src/index.js
这是可以修改的：
webpack.config.js:
const path = require('path')
module.exports = {
mode: 'development',
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
}
热部署插件安装：
npm install webpack-dev-server@3.11.2 -D
热部署运行脚本修改：
package.json:
"scripts": {
"dev": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
执行npm run dev
如果报错，请升级webpack-cli，执行npm install -D webpack-cli