本项目基于webpack3版本。
本项目是一个基于webpack3架构的web app脚手架，其特点如下：
- 前端多页项目工程，适用于需要后端渲染的中小型展示型站点
- 引入pages和component的概念，方便多页面对布局、组件的复用，只需了解ejs模版引擎使用方法，即可轻松上手
- 编译后的程序不依赖于外部的资源（包括css、font、图片等资源都做了迁移），更改配置也可以整体放到CDN上。
- 不含Js框架（jQuery不算框架，谢谢）。
- clone项目
git clone [email protected]:unclepan/website.git
- 本项目使用包管理工具NPM，因此需要先把本项目所依赖的包下载下来：
$ npm install
- 启动服务器，推荐直接使用webpack-dev-server
$ npm run dev
- 编译项目
$ npm run build
- 理论上来说，webpack-dev-server会自动帮你打开浏览器并展示示例页面；如果没有的话，请自行配置config参数autoOpenBrowser为true，指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，页可在config中配置，其他参数请参考里面的注释。
| 命令 | 作用&效果 |
|---|---|
| npm run build | 根据webpack.prod.conf.js，编译出一份生产环境的代码 |
| npm run dev | 根据webpack.dev.conf.js，开启webpack-dev-server并自动打开浏览器，自动监测源码变动并实现Hot Module Replacement，推荐实际开发时使用此项 |
| npm run stats | 根据webpack.prod.conf.js，在根目录生成stats.json得到项目依赖的统计信息，可视化工具：http://webpack.github.io/analyse/ 或者 https://chrisbateman.github.io/webpack-visualizer/ 或者 https://alexkuz.github.io/webpack-chart/ 或者 自行谷歌。当你优化包输出的大小，这些工具是非常重要的。官方工具有很多的功能，但即使是简单的可视化也可以揭示问题点。 |
├─build # 生产环境的webpack配置文件夹
│ ├─postcss.config.js # postcss插件的配置等
│ ├─utils.js # 基础的工具函数
│ ├─webpack.base.conf.js # 开发环境和生产环境的公用webpack配置文件。
│ ├─webpack.dev.conf.js # 开发环境webpack配置文件，使用webpack-dev-server启动
│ └─webpack.prod.conf.js # 生产环境webpack配置文件。
├─config # 基础的配置参数文件夹
│ ├─dev.env.js # 开发环境。
│ ├─index.js # 配置参数
│ └─prod.env.js # 生产环境。
├─node_modules # 利用npm管理的所有包及其依赖
├─.eslintrc # ESLint的配置文件
├─package.json # npm的配置文件
├─.gitignore # git的配置文件
├─src # 当前项目的源码
├─pages # 各个页面，如入口文件、只有该页面使用到的css、模板文件等
├─components # 组件，可以是纯HTML，也可以包含js/css/image等，看自己需要
├─assets # 公用的图片资源
└─common # 各个页面使用到的公共资源
暂无更新
版本号为1.0.0