webpack打包发布

文章目录

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 文件夹中

  

• 上面案例代码，在此基础上作出改动​