webpack-01
背景：
Javascript工程项目越来越大，如果采用原来在使用<script>标签引入的js文件，会非常的麻烦。于是js工程师开始考虑使用模块的概念，编写各个模块通过打包工具（webpack,vite等）将这些模块进行组装。Webpack就是其中一个很出色的模块打包工具。
使用：
1、初始化项目 npm init，会生成一个package.json文件，其中的内容相当于npm的说明书，记录项目名称 版本和仓库。
2、npm安装 webpack 和webpack-cli
webpack 是webpack核心，webpack-cli 是webpack的命令行工具，装了它就可以使用npx 命令了。
3、webpack命令打包命令，和简化方法
npx webpack --entry = ./index.js --mode=’development’--entry指定打包其实模块，告诉webpack从这个文件开始组合模块
--mode 告诉webpack是开发环境打包还是生产环境打包。此外还有生产环境关键字 production
简化：每次打包如果都输入上面那么长的命令，会很麻烦，那么可以使用scritps脚本来简化命令。 在webpack.json中添加一个
'scripts':{"build":"webpack --entry=./index.js --mode='development'"
}此时就可以使用 npm run build 代替之前一长串的命令
4.webpack.config.js文件（webpack配置文件）
为什么叫webpack的配置文件？因为一个项目webpack的配置项可能会有很多，如果还在webpack.json中的命令中添加参数，后续会非常难以维护。因为webpack.config.js配置文件就应运而生，我们可以将命令行参数在这个文件中维护。
module.exports={entry:'./src/index.js'，output:{filename:'main.js' // 输出文件名},mode:"development" //
}此时webpack.json文件中命令行可以改为
'scripts':{"build":"webpack"
}注：webpack打包默认入口文件为 scr/index.js，打包后的文件路径为 dist目录
此时运行，npm run build
5、webpack-dev-server简化开发时的打包工作。
在此之前没完成一个或者一段代码编写，调试前都得调用执行一次npm run build 这样挺繁琐。为了解决这个问题，社区提供了webpack-dev-server,在开发阶段开发者不用打包就能调试自己代码。
在webpack.json中配置命令
"scripts":{"build":"webpack","dev":"webpack-dev-server"}还需要再webpack.config.js中配置开发服务
module.exports={entry:'./src/index.js'，output:{filename:'main.js' // 输出文件名},mode:"development", // devServer:{publicPath:'/dist' // 开发者服务器会从dist中拿资源}
}webpack-dev-server 打包存在于内存中。