从0到1把一个原生网站项目升级为webpack+vue项目

本文演示了如何把SPA项目改造成MPA，同时把vue2升级到了vue3，在升级过程中需要升级所依赖的包。

本文介绍了如何把原生项目改造成SPA的vue单页应用。这个过程中，需要加上vue-router来做跳转。

本文介绍了如何把一个原生JS项目集成vue框架，先建立入口main.js文件和入口组件App.vue。然后，安装vue的相关库，比如vue-template-compiler和vue-loader

通过对应的plugin对css和js文件进行了分离并压缩，减少打包的体积。同时，设置splitChunks对第三方库进行了分离。最后利用ejs实现了组件抽离。

利用webpack实现了多入口配置，优化了打包后的体积。同时，我们利用copy-webpack-plugin实现了打包后文件的复制功能。

在移植jquery过程中，发现全局没有$变量，通过webpack的providePlugin进行注册。同时，在移植的时候会有图片路径的问题。

本文主要介绍了webpack中css文件的打包，如果css文件包含图片，可以使用webpack5内置的新特性打包，而无需安装css-loader等工具

本文详细介绍了在原生项目中集成webpack，在首页index.html中删除所有的link和script资源引入，这些资源以后会在入口文件统一引入，然后利用插件生成模板。

本文分析原生项目存在的几个问题，比如资源分散，请求加载慢；开发模式老旧，开发效率低等问题，并针对这些问题给出了相应的解决方案。