webpack2-Scaffolding
重要的事情说三遍
项目地址
https://github.com/sayll/avalon-webpack-start
介绍
webpack2脚手架正式版,一个多资源统筹的脚手架。
本项目使用avalon2
作为演示框架。
为兼容低版本浏览器,我也是强烈推荐一下它。市面上应该也算唯一能够支持到IE8以下的MVVM框架了吧。
关于【Webpack】
服务端使用Koa。需要注意的是,只有一个目的那就是提供了
webpack-dev-middleware
和webpack-hot-middleware
(代码热替换)。使用自定义的Koa程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。针对不同的loader采用了多线程编译,极大的加快了编译速度。
使用webpack.DllReferencePlugin打包框架和库。加快编译与打包速度。
启动新技术tree-shaking
Babel被配置babel-plugin-transform-runtime可以让代码更优化。
关于【Css】
css的模块化,预处理器的编译。(支持
sass,scss,less,postcss
)针对低版本浏览器和其他浏览器内核的特殊性,启用autoprefixer自动添加浏览器前缀
针对移动开发,有独特的处理方案。(具体文档等待补充)
每次修改都会生成新的文件名,防止旧样式缓存带来的影响。(与JS间做了特殊处理,通过JS引入的CSS不会因JS改变而改变它的hash值)
针对开发模式启用修改自动刷新页面。(做了特殊处理,发布模式将得到优化)
关于【Js】
支持ES6的最新特性
模块化,可才用ES6的import,也可用AMD规范的require
每次修改都会生成新的文件名,防止旧脚本缓存带来的影响。(与CSS间做了特殊处理,通过JS引入的CSS不会因CSS改变而改变它的hash值)
快速编译,自动刷新。
将常用的框架和库进行单独打包。(Dll)防止重复引用,导致打包文件臃肿。
提供公共脚本的文件入口,此文件将被所有页面自动引用。(可设置全局变量,引入公共的库。如Jquery)
关于【Html】
支持单页应用和多页应用的混合开发。
自动引入页面的CSS和JS文件。无需手动设置URL。(所有文件hash的改变都会导致文件名改变,这里的资源引用全由内部自动完成)
如有使用常用的框架和库进行单独打包。(Dll),将需要单独引用dll的vendor.js;
开始
环境配置
依赖配置
确认好你的环境配置,然后就可以开始以下步骤。
$ git clone https://github.com/sayll/avalon-webpack-start.git
$ cd avalon-webpack-start
$ npm install # Install project dependencies
$ npm start # Compile and launch
如果一切顺利,就能正常打开端口:http://localhost: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 # 公共的资源文件
│ ├── css
│ ├── font
│ ├── img
| └── js
│ ├── static # 公共的静态资源文件(所有内部文件通过index.js引入,可配置全局变量。)
│ └── view # 主路由和异步分割点
│ └── index # 匹配html文件夹中的index.html。(css,js文件名对应文件夹名,可直接打包无需单独引入)
│ ├── index.js # 直接与index.html匹配的入口文件,可以作为单页应用的入口,在内部定义自己的项目目录
│ ├── index.css # 如是多页应用,可设置对应的CSS文件,直接匹配。
│ └── other ** # 页面的其他资源文件,通过index.js引入
└── test # 单元测试(日后调整,待开发ing)
使用手册
流程
基本
主动引入DLL的JS,默认地址为
<script src="/dll/vendor.js"></script>
位于
app/view
配置html相关的JS和CSS文件。(JS和CSS需与HTML保持一致,可参考现有模版)【更多说明】
高级
引用字体图标Icon【更多说明】
使用框架(avalon)或库(jquery)【更多说明】
设置全局变量。虽引入公共库,但每次调用都需重新声明。所以就有了公共文件来提前声明。【更多说明】
使用Css预处理器(更多说明)
使用CDN(更多说明)
修改目录结构(更多说明)
最后
打包文件为
build
文件夹,请以此为根目录。
更新日志
最重要的事情
项目地址: https://github.com/sayll/avalon-webpack-start
亲不要吝啬自己的Star,到Github右上角Star一下呗。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。