webpack4.x-multi-page

使用webpack4.x快速构建生成一个多页面的静态站点。

可以快速，方便的构建一个对页面的企业站或个人博客。

注：多页面应用 (WPA) 的用户体验相较于 单页面应用 （SPA）的效果，并不是特别好。一个突出的缺点就是抖动。

相关项目：

• webpack-anuglar for angular7。demo
• webpack4.x-angularjs for angular.js. demo。

安装项目所需依赖

yarn

优化项目所需的图片资源

npm run img

注：在执行npm run dev或npm run build命令前，需要先运行npm run img，这个命令会将项目所需要的图片进行优化，然后输出到正确的目录下，否则，项目启动时会找不到这些图片。

运行项目

npm run dev

发布项目

npm run build

如何构建多页面应用

v1.0.0

• 移除optimize-css-assets-webpack-plugin插件，使用cssnano来实现对webpack分离出的*.css进行压缩；
• 移除terser-webpack-plugin插件，使用webpack内置的插件对*.js进行压缩；
• 优化lazyload，同时修复轮播图的显示问题；
• 修复由于https造成的地图无法加载的问题。

v0.9.1

• 更新，处理cdn的阻塞
• 使用lazyload处理图片

v0.9.0

• 添加webpack构建分析工具
• 添加社会责任页面数据
• 修复站点地图单击事件无效问题
• 部分样式修改

v0.8.0

• 引入workbox实现PWA功能
• 使用manifest.json创建desktop icon

这个版本的代码的演示示例请参考https://lvzhenbang.github.io/webpack4.x-multi-page/dist/

参考文章workbox

v0.7.2

• 提取子导航的数据（shzr，sxy，zjsj，ywbk），完成整个静态站数据的整理
• 因为数据存放在*.js文件中，然后被pug-loader处理，进而可以被url-loader处理。这样保证了整个静态站的所有图片都可以被url-loader或file-loader处理

v0.7.1

• 修复构建耗时的问题（6-8S构建完成），减少一半多的时间
• 整理构建启动文件到./build/目录，添加配置文件./config/index.js
• 启用source-map
• 启用了SplitChunksPlugin，增加了common模块
• 修复了product、contactus、footer的bug
• 为生产模式下的图片添加hash

v0.7 实现web的响应式功能

v0.6 提取整理所有的mock Data && 使用webpack的resolve.alias实现对路径的优化

参考文章：构建多页面应用——优化（二）

v0.5 实现对图片的优化处理 && 给URL添加hash，实现对页面的动画控制

参考文章：构建多页面应用——优化

参考文章：构建多页面应用——hash

v0.4 重构目录，实现对静态资源的处理

参考文章：构建多页面应用——静态资源处理

v0.3 实现html代码的模块化拆分

参考文章：构建多页面应用——模板

v0.2 实现css代码的模块化拆分

参考文章：构建多页面应用——单个页面的处理

v0.1 使用SplitChunk实现js代码模块化拆分

参考文章：构建多页面应用