multi page application
使用webpack4.x快速构建生成一个多页面的静态站点。
可以快速,方便的构建一个对页面的企业站或个人博客。
注:多页面应用
(WPA) 的用户体验相较于 单页面应用
(SPA)的效果,并不是特别好。一个突出的缺点就是抖动
。
相关项目:
angular7
。demo
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
*.js
文件中,然后被pug-loader
处理,进而可以被url-loader
处理。这样保证了整个静态站的所有图片都可以被url-loader
或file-loader
处理v0.7.1
./build/
目录,添加配置文件./config/index.js
source-map
SplitChunksPlugin
,增加了common
模块product
、contactus
、footer
的bughash
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代码模块化拆分
参考文章:构建多页面应用