以下内容就是【为什么项目开发完要打包发布?如何打包?】,由南京达内教育小编为您讲解~
项目开发完成后,使用webpack打包发布项目的主要原因如下:① 在开发环境中,打包文件存储在内存中,无法获得最终打包文件。② 在开发环境中,打包生成的文件不会受到代码压缩和性能优化的影响。为了使项目能够在生产环境中高性能地运行,需要对项目进行打包和发布。
配置网页包的打包和发布
在package.json文件的scripts节点下,添加build命令,如下所示:

--model是用于指定Web包运行模式的参数项。生产代表生产环境。它将压缩代码并优化打包文件的性能。
注意:由--model指定的参数项将覆盖webpack.config.js中的model选项。
将JavaScript文件统一生成到JS目录中
在webpack.config.js配置文件的输出节点中,配置如下:

统一生成图片文件到图像目录
修改webpack.config.js中的URL加载程序配置项,并添加outputpath选项以指定图片文件的输出路径:

自动清理dist目录中的旧文件
为了在每次打包和发布时自动清理dist目录中的旧文件,您可以安装和配置clean webpack插件插件:

企业项目的打包和发布
企业项目的打包和发布比以前的方法复杂得多。主要出版过程如下:
生成包装报告,并根据报告分析具体优化方案
Tree-Shaking
为第三方库启用CDN加载
配置组件的按需加载
启用路由延迟加载
自定义主页内容