[前端]webpack打包流程详解

最新推荐文章于 2025-07-01 23:58:52 发布

原创最新推荐文章于 2025-07-01 23:58:52 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了使用Vue CLI脚手架搭建的项目如何通过Webpack进行打包，并解释了打包的目的及步骤。同时，提供了修改打包后文件路径的方法，以便在服务器上正确部署含有多个项目的网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们一般用vue-cli脚手架搭建的项目,会用webpack打包,因为vue-cli是基于webpack的.
为什么打包? 就是将所有的脚本文件js或css文件等都合并到一个文件

步骤:

npm run build
会多一个dist文件
将dist文件里的代码上传到服务器,输入ip就可以访问哟
项目打包后,vue的脚手架默认会把网站放到服务器的根目录上,当如果一个www的服务器存放了多个代码,就会需要修改文件的路径
方法:
2.1 在根目录下创建一个 vue.config.js文件
2.2 在文件中配置如下代码:

	module.exports = {
		publicPath:'',
		productionSourceMap:false
	}
	// productionS**加粗样式**ourceMap:false是移除在打包过程中产生的map文件,map文件是代码打包过程中的错误

2.3 npm run build