webpack2正式版

webpack2正式版

webpack2正式版，简单方便的构建单页和多页用用。（启用tree-shaking新技术）
地址：avalon-webpack-start

这个启动包的针对单页应用和多页应用作了特殊处理，能够混合开发。全部都是可配置，富特性，基于webpack已经提供代码热加载，使用postCss(可添加替换sass,less)预处理css，代码分割等等更多。（下一步是：完善单元测试，代码覆盖率报告）

若是你们有更好的想法及建议请提Issues。

以为不错的话，请Star一下本项目，这是对做者最大的支持。

开始

确认好你的环境配置，而后就能够开始如下步骤。

$ git clone https://github.com/sayll/avalon-webpack-start.git
$ cd avalon-webpack-start
$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

---

关于package.json中dependencies的相关依赖，请自行下载。本例子以react为框架

若是一切顺利,就能正常打开端口:127.0.0.1:1000

开发过程当中，你用得最多的会是npm start，可是这里还有不少其它的处理：

npm run <script>	解释
start	第一次运行启用。生成DLL文件，服务启动在1000端口，代码热替换开启。
deploy	删除旧文件，生成新DLL，打包相关文件（默认目录~/build）。
dev	与npm start相似相同,只有但DLL文件存在时可用。加快开发速度。
test	开启Karma测试并生成覆盖率报告。
visualizer	打包资源分析
build	同dev在DLL文件存在时，加快打包速度。
clean	清除打包的文件
cnpm	替换为淘宝镜像
dll	适合第一次启动时运行，生成DLL文件。

• 第一次运行，推荐使用 start,后续调试使用dev

• 打包推荐使用deploy

• 目前全部相关开发打包都需依赖dll,当不清楚时，运行一下npm run dll,再完成接下来的操做。

程序目录

.
├── build                    # 全部打包配置项
├── config                   # 项目配置文件
├── server                   # Express 程序 (使用 webpack 中间件)
│   └── main.js              # 服务端程序入口文件
├── app                      # 程序源文件
│   ├── html                 # 多页或单页应用的入口HTML
│   ├── source               # 公共的资源文件
│   ├── static               # 静态文件(不要处处imported源文件，全部内部文件经过index.js引入，配置后单独打包)
│   └── view                 # 主路由和异步分割点
│       └── index            # 匹配html文件夹中的index.html。（css,js文件名对应文件夹名，可直接打包无需单独引入）
│           ├── index.js     # 直接与index.html匹配的入口文件，能够做为单页应用的入口，在内部定义本身的项目目录
│           ├── index.css    # 如是多页应用，可设置对应的CSS文件，直接匹配。
│           └── other **     # 页面的其余资源文件，经过index.js引入
└── test                     # 单元测试（往后调整，待开发ing）

样式

使用postCss(可添加替换sass,less)预处理css。

服务端

这个项目的服务端使用Koa。须要注意的是，只有一个目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（代码热替换）。使用自定义的Koa程序替换webpack-dev-server，让它更容易实现universal 渲染和为了避免使这个包过于庞大。

打包优化

Babel被配置babel-plugin-transform-runtime可让代码更优化。dll文件加速打包和开发速度。资源的特殊匹配，避免引入无关的包文件。

后续

项目地址：avalon-webpack-start

功能将慢慢完善，文档方面也会补全。案例也会编写。敬请期待！