5打包发布
5.1为什么要打包发布
项目开发完成之后，使用webpack对项目进行打包发布的主要原因有以下两点：
开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
开发环境下，打包生成的文件不会进行代码压缩和性能优化
5.2配置webpack的打包发布
在package.json文件的scripts节点下，新增build命令如下：
"scripts" : { "dev" : "webpack serve", //开发环境中，运行 "build": "webpack --mode production" //项目发布时，运行 build命令 }
–model是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过–model指定的参数项，会覆盖webpack.config.js 中的model选项。
5.3把JavaScript文件统一生成到js目录中
在 webpack.config.js 配置文件的 output节点中，进行如下的配置：
module.exports中
output: { path: path.join( __dirname, 'dist'), //明确告诉webpack把生成的 main.js 文件存放到 dist目录下的 js 子目录中 filename: 'js/main.js', }
5.4把图片文件统一生成到image目录中
module: { //所有第三方文件模块的匹配规则 rules: [ //文件后缀名的匹配规则 { test: /\.jpg|png|gif$/, use: { //通过loader属性指定调用的loader loader: 'url-loader', //通过option属性指定参数 options: { limit: 22229, outputPath: 'image' } } } ] }
或
{ test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }
5.5自动清理dist目录下的旧文件
为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件
5.5.1安装清理dist目录的 webpack插件
npm install clean-webpack-plugin -D
5.5.2配置
在 webpack.config.js 配置文件
module.exports中
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin') const cleanPlugin = new CleanWebpackPlugin() //把创建的 cleanPlugin 插件实例对象，挂载到plugins节点中 plugins: [htmlPlugin，cleanPlugin], //挂载插件
