项目的打包发布

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

2.配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令如下:

"scripts": {
    "dev": "webpack serve",   
    "build": "webpack --mode production"
  },

dev：在开发环境中运行dev命令npm run dev(带serve生成的文件会放到内存)

bulid：在项目发布时，运行build命令npm run bulid(不带serve生成的文件会放到物理磁盘上)

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

①通过--model指定的参数项，会覆盖 webpack.config.js 中的 model 选项

mode: 'development',

②开发的时候一定要用development，因为开发中追求的是打包的速度，而不是体积。反过来，项目发布上线的时候一定能要用production 因为上线追求的是体积小，而不是打包速度快！

3.把JavaScript 文件统一生成到js 目录中
在 webpack.config.js 配置文件的 output 节点中进行如下的配置:

// 指定生成的文件要存放到哪里
 output: {
    // 存放到目录
     path: path.join(__dirname,'dist'),
    // 生成的文件名
     filename: 'js/bundle.js'
    },

明确告诉 webpack 把生成的 bundle.js文件存放到 dist 目录下的 js 子目录中

4.把图片文件统一生成到 image 目录中
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径:

// 处理图片文件的loader
// 处理需要调用的loader只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
// 在配置url-loader的时候，多个参数之间，使用 & 符号进行分隔
{test: /\.jpg|png|gif$/,use: 'url-loader?limit=470&outputPath=images'}, 

5.自动清理 dist 目录下的旧文件
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置clean-webpack-plugin 插件:

①安装清理 dist 目录的 webpack 插件

npm install clean-webpack-plugin@3.0.0 -D

②按需导入插件、得到插件的构造函数之后，创建插件的实例对象

// 注意：左侧的{}是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

③把创建的 cleanPlugin 插件实例对象，挂载到 plugins 节点中

plugins: [htmlPlugin,cleanPlugin], //挂载插件