webpack4搭建Vue多页面应用实战总结

"本文主要介绍了如何使用webpack4来构建一个前端多页面项目，涉及项目结构、文件目录、关键配置以及开发和生产环境的构建过程。作者通过实际操作的经验分享，帮助读者理解webpack在非单页应用中的应用。" 在前端开发中，webpack是一个强大的模块打包工具，通常用于构建单页应用(SPA)。但在某些场景下，如需要构建多页面网站时，webpack也能胜任。本篇文章以"webpack4打包vue前端多页面项目"为主题，讲述了如何手动配置webpack来处理多个独立的Vue实例。 1. 项目结构与用法 项目结构主要分为两个部分：`build` 和 `src`。`build` 目录由webpack生成，包含编译后的CSS、JS文件以及生成的HTML页面，例如`page1.html`和`page2.html`。`public`目录用于存放静态资源，如字体、图片等。`src`目录是源码文件夹，包含Vue组件、CSS样式和JS逻辑，每个页面都有一个单独的Vue实例（如`page1.js`和`page2.js`），它们绑定到对应的HTML页面的`#app`元素上。 2. 安装与运行 首先，需要通过`npm install`安装所需的依赖包。在开发阶段，使用`npm run start`启动开发服务器，访问`http://localhost:3000/page1.html`或`page2.html`即可查看页面。在完成开发后，运行`npm run build`生成优化过的生产版本，所有资源将被放置在`build/`文件夹内供线上服务器使用。 3. webpack配置 为了适应不同的环境（开发和生产），webpack配置分为多个文件。`webpack.common.js`包含通用配置，而`webpack.dev.js`和`webpack.prod.js`分别针对开发和生产环境进行特定设置。需要注意的是，尽管可以尝试使用环境变量来简化配置，但在webpack的模块导出中，这种方法可能不适用。 在这个过程中，开发者可能会遇到如"Cannot GET"的错误，这通常是由于配置了错误的服务器主页导致的。确保在开发服务器配置中正确指定HTML文件路径，以便能够正确加载页面。 这个教程详细地阐述了在webpack4中配置和构建多页面Vue项目的步骤，包括项目结构设计、依赖安装、运行命令以及webpack配置的细节。对于想要脱离脚手架，深入了解webpack配置的前端开发者来说，这是一个非常实用的指南。