1. 为什么要打包发布

• 项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：
  ① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
  ② 开发环境下，打包生成的文件不会进行代码压缩和性能优化
• 为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

2. 配置 webpack 的打包发布

• 在 package.json 文件的 scripts 节点下，新增 build 命令如下：
  

• --model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

• 注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
  

• 在前面开发环境中，npm run dev 打包的文件都是放在内存当中的，便于快速看到效果

• 运行生产环境命令：npm run build，可以在 dist 文件夹下看到打包压缩好的文件
  

3. 把 JavaScript 文件统一生成到 js 目录中

• 在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：
  

4. 把图片文件统一生成到 images 目录中

• 修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：
• 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分割
  

5. 自动清理 dist 目录下的旧文件

• 为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：
• 在 npmjs.com 中可以查到该插件的安装和配置详情
  

npm install --save-dev clean-webpack-plugin

• 当再次打包后，就会把以前生成的 dist 文件夹删除重新打包生成了

• 也可以看到 js 文件放到了指定的 js 文件夹中
  

• 上面案例代码，在此基础上作出改动：https://blog.csdn.net/qq_41684621/article/details/124556811