webpack的打包发布

为什么要打包发布

项目开发完成后，使用webpack进行打包发布的原因

• 开发环境下，打包生成的文件放于内存中，无法获取到最终打包生成的文件
• 开发环境下，打包生成的文件不会进行代码压缩和性能优化

配置webpack的打包发布

在package.json文件的script节点下，新增build命令

"build" ："webpack  --mode production" //项目发布时，运行build命令
--mode 用来指定运行模式，production表示生产坏境，会对打包生成的文件进行代码压缩和性能优化
这个指定的参数项会覆盖webpack.config.js中的model选项

对打包生成的文件进行分类整理

在webpack.config.js中的output节点下，
output:{
	path:path.join(__dirname,'dist'),
	//把bundle.js放在js下
	filename: 'js/bundle.js'
	
,}
对于图片文件 在rules下的url-loader配置项中的use下的options下新增参数项outputPath
{
	options:{
		limit:2222,
		outputPath:'image'
	}
}

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

使用clean-webpack-plugin插件

• 安装 npm install clean-webpack-plugin -D
• 按需导入 const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
• 创建实例对像 const cleanPlugin = new CleanWebpackPlugin()
• 挂载在plugins节点中 plugins:[cleanPlugin]

企业级项目的打包发布

• 生成打包报告，根据报告分析具体的优化方案
• Tree-Shaking
• 为第三方库启用CDN加载
• 配置组件的按需加载
• 开启路由懒加载
• 自定制首页内容