基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

junfeng777 发布于2019-08-23 12:29 / 1911人阅读

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自

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(移动端模板)

私有云云服务器开箱即用 webrtc 前端开发环境搭建前端页面开发页面前端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98595.html

开箱即用的多页面webpack脚手架

摘要：开箱即用的多页面脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用，这样的框架。痛不欲生，即使写完了，以后的迭代维护同样痛苦。还不如创建一个脚手架，以后遇到这种官网多页面的需求的时候拿来即用，岂不美哉。开箱即用的多页面webpack脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用react，vue这样的框架。本来...

sunnyxd 2019-08-22 17:17 评论0 收藏0
开箱即用的多页面webpack脚手架

摘要：开箱即用的多页面脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用，这样的框架。痛不欲生，即使写完了，以后的迭代维护同样痛苦。还不如创建一个脚手架，以后遇到这种官网多页面的需求的时候拿来即用，岂不美哉。开箱即用的多页面webpack脚手架最近接手一个新项目，公司官网，官网为了对爬虫友好，不合适做单页面，更不大适合用react，vue这样的框架。本来...

atinosun 2019-08-02 10:27 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
告别webpack react 搭建多页面之痛

摘要：搭建多页面应用在往下看之前请确保先上个凉的吃着目录结构编译结果配置文件脚本存放处项目开发中一些常用的方法主要存放和请求有关的静态文件模版文件项目开发中一些常用的方法其实我觉得可以和放在一块，但是个人习惯还是分开啦开始撸代码如何创建多页面应用 webpack4 搭建 react 多页面应用在往下看之前请确保nodejs > 8.X 先上个凉的吃着目录结构 . ├── dist ...

seanHai 2019-08-23 15:25 评论0 收藏0
告别webpack react 搭建多页面之痛

摘要：搭建多页面应用在往下看之前请确保先上个凉的吃着目录结构编译结果配置文件脚本存放处项目开发中一些常用的方法主要存放和请求有关的静态文件模版文件项目开发中一些常用的方法其实我觉得可以和放在一块，但是个人习惯还是分开啦开始撸代码如何创建多页面应用 webpack4 搭建 react 多页面应用在往下看之前请确保nodejs > 8.X 先上个凉的吃着目录结构 . ├── dist ...

beita 2019-08-05 18:10 评论0 收藏0