基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，专注于开发，不依赖三大框架

Webpack-seed

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

感兴趣的朋友，请点个 star

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

项目bug, 请提 issue

特性 （Feature）

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

模块化成果

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

页面	公用样式	当前页面私有样式	底层核心库	页面公用类库	当前页面私有模块
首页	common.css	index.css	core.js	common.js	index.js
列表页	common.css	list.css	core.js	common.js	list.js
详情页	common.css	detail.css	core.js	common.js	detail.js
购物车	common.css	goods.css	core.js	common.js	goods.js
登录页	common.css	login.css	core.js	common.js	login.js

使用指南 （Usage）

下载使用

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

cd webpack-seed

npm install

本地开发(dev)

npm run dev

打包(build)

• 默认情况下，该配置方案假设你的应用是被部署在一个域名的根路径上例如 https://www.my-app.com/
• 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径
• 例如，如果你的应用被部署在 https://www.my-app.com/my-app/
• 则设置 webpack的output.publicPath 为 /my-app/
• 本项目由于需要临时部署在git-pages预览 所以改配置临时改为/webpack-seed/
• 普通打包(大部分) npm run build 默认 '/'
• 该命令具体请看package.json scripts命令配置
• 配置详情
• 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-pc (大众网站模板)
• [ ] web-mobile(移动端模板)