【源码】基于Webpack和Vue的多页面项目Webpack 4升级及构建优化

项目简介

本项目是基于Webpack和Vue的多页面项目，原采用Webpack 3构建。此次将项目升级到Webpack 4，对构建速度进行优化，同时支持ES6+语法，有效提升了项目开发效率和构建性能。

项目的主要特性和功能

1. 多页面应用构建：借助Webpack配置实现多个页面并行开发、构建与部署。
2. Vue框架应用：采用Vue组件化开发模式，增强代码可维护性与复用性。
3. ES6+语法支持：通过Babel转译，可使用最新JavaScript语法。

安装使用步骤

安装依赖

1. 安装Webpack 4及相关插件依赖。
2. 安装Vue及Vue相关插件依赖。
3. 安装Babel及Babel相关插件依赖。

配置Webpack

1. 升级Webpack配置文件，使其符合Webpack 4配置规范。
2. 配置mini-css-extract-plugin，将CSS提取到单独文件。
3. 配置optimization选项，进行代码分割和压缩。

配置Babel

1. 创建Babel配置文件（.babelrc）。
2. 安装并配置Babel插件，支持ES6+语法。

运行项目

1. 完成依赖安装后，运行Webpack构建项目。
2. 在浏览器中打开生成的HTML文件，查看项目运行结果。

构建速度优化

1. 使用DllPlugin或AutoDllPlugin提前打包公共代码。
2. 使用HappyPack或thread-loader开启Loader多进程转换。
3. 优化Webpack配置，减少不必要构建步骤和插件。

常见问题及解决方案

1. json-loader兼容性问题：使用Webpack内置的json-loader替换插件，并修改配置。
2. vue-loader升级问题：使用require('com.vue').default或import方式引用组件。
3. 提取公共CSS代码问题：将需提取到公共文件的CSS改在JS中引入。
4. mini-css-extract-plugin filename不支持函数问题：使用FileManagerPlugin等插件在构建后移动文件。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】