开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vue Angular React)

感兴趣的朋友，请点个

及时关注项目更新, 请点个

项目bug, 请提

特性 （Feature）

• 支持前后端分离开发
• 配置完整的打包方案
• 支持本地开发热更新
• 集成代码风格校验Eslint
• 支持ES6编写源码，编译生成生产代码
• 内置sass开发环境，自动加样式前缀,自动编译css && 注入到页面
• 开发(生产)环境代码自动注入页面, 专注于开发
• 编译后的程序不依赖于外部的资源, 可放到CDN

模块化成果

展示下页面呈现结果(页面资源加载逻辑),这可能就是我们想要的模块化吧

使用指南 （Usage）

下载使用

git clone https://github.com/BiYuqi/webpack-seed.gitcd webpack-seednpm install

本地开发(dev)

npm run dev

打包(build)

• 默认情况下，该配置方案假设你的应用是被部署在一个域名的根路径上例如
• 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径
• 例如，如果你的应用被部署在
• 则设置 webpack的output.publicPath 为 /my-app/
• 本项目由于需要临时部署在git-pages预览 所以改配置临时改为/webpack-seed/
• 普通打包(大部分) npm run build 默认 '/'
• 该命令具体请看package.json scripts命令配置

// 普通打包(大部分) npm run build publicPath默认 '/'npm run build// 打包时 npm run build:git 该命令会打包的路径会自动带上github项目地址/webpack-seed///(当发布环境不是服务器根路径，都可以采用该方案，只需更改路径名称即可，本项目二级路径为webpack-seed)npm run build:git

目录结构 （Source）

• build/
• ---config.js 开发，打包基础配置(包含输出文件名, 路径配置等都在此配置)
• ---utils.js 多入口，多页面基础配置
• ---webpack.base.config.js 基础配置
• ---webpack.dev.config.js 开发环境
• ---webpack.prod.config.js 打包环境
• src/
• ---common/ 项目公用资源 (公用图片,css,js等配置)
• ----------------libs.js 第三库自动渲染到页面(此处配置的静态资源,会自动注入到页面)
• ---api 接口请求配置
• ---components 项目模板 （复用的页面片段,目前该模板已趋于稳定，细节样式需调整）
• ---layout/ 项目结构模板 (供各个子模块调用，后续可扩展多样化模板,可以添加不带侧边栏的模板等)
• ----------------layout 默认模板（header+footer）
• ----------------layoutAuth 定制化模板 (比如登录页没有header或者相关)
• ----------------XXXXXXXX 可根据业务需求，定制自己的页面基础模板
• ---templates/ 页面中使用到的模板片段存放目录
• ---views/ （模块开发文件夹)
• ----------------子模块，各种模块页面
• ---vendor/ 第三方库存放在此

输出目录 （Output）

• dist/
• ---html
• ---image
• ---media
• ---css
• ---js
• ---lib
• ---index.html

注意：如果有音视频等，会被打包在media目录

TODO

• [x] 添加ejs模板，进行页面(首尾)复用, 页面功能模板渲染
• [x] mini-css-extract-plugin 提取js内引入scss文件失败, 打包后依然在js文件（已解决）
• [x] 首页页面模板未完成（单独处理打包）
• [x] 添加第三方库以链接的方式引入
• [x] 增加ESLint代码校验
• [x] 增加两个文件夹，一个是fix IE兼容, 一个是引入的公用库，自动加载第三方库到页面，避免手动填写
• [x] 增加网站未登录的模板(无header,footer)
• [x] 添加多样化layout模板支持(示例layout/layoutAuth)
• [ ] 添加完整网站demo示例(进行中...)
• [ ] 添加doc使用说明以及实现思路解析

LONG TODO（Base on master）

• [ ] 建立分支web-system（后台管理系统模板）
• [x] (大众网站模板)
• [ ] web-mobile(移动端模板)