webpack2正式优化版,简化操作

webpack2-Scaffolding

  • 请各位看客老爷不要吝啬自己的Star,先来Github右上角Star一下呗。

  • Github右上角Star

  • Github右上角Star

webpack2正式优化版,简化操作_第1张图片

  • 重要的事情说三遍

项目地址

https://github.com/sayll/avalon-webpack-start

介绍

webpack2脚手架正式版,一个多资源统筹的脚手架。
本项目使用avalon2作为演示框架。
为兼容低版本浏览器,我也是强烈推荐一下它。市面上应该也算唯一能够支持到IE8以下的MVVM框架了吧。

关于【Webpack】

  1. 服务端使用Koa。需要注意的是,只有一个目的那就是提供了webpack-dev-middlewarewebpack-hot-middleware(代码热替换)。使用自定义的Koa程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。

  2. 针对不同的loader采用了多线程编译,极大的加快了编译速度。

  3. 使用webpack.DllReferencePlugin打包框架和库。加快编译与打包速度。

  4. 启动新技术tree-shaking

  5. 提供测试框架进行单元测试,代码覆盖率报告,可与Travis-ci和Coveralls快速对接。【配置说明】

  6. Babel被配置babel-plugin-transform-runtime可以让代码更优化。

关于【Css】

  1. css的模块化,预处理器的编译。(支持sass,scss,less,postcss

  2. 针对低版本浏览器和其他浏览器内核的特殊性,启用autoprefixer自动添加浏览器前缀

  3. 针对移动开发,有独特的处理方案。(具体文档等待补充)

  4. 可导入字体和字体图标,操作非常简单。(如阿里系icon)【配置文档】

  5. 每次修改都会生成新的文件名,防止旧样式缓存带来的影响。(与JS间做了特殊处理,通过JS引入的CSS不会因JS改变而改变它的hash值)

  6. 针对开发模式启用修改自动刷新页面。(做了特殊处理,发布模式将得到优化)

关于【Js】

  1. 支持ES6的最新特性

  2. 模块化,可才用ES6的import,也可用AMD规范的require

  3. 每次修改都会生成新的文件名,防止旧脚本缓存带来的影响。(与CSS间做了特殊处理,通过JS引入的CSS不会因CSS改变而改变它的hash值)

  4. 快速编译,自动刷新。

  5. 将常用的框架和库进行单独打包。(Dll)防止重复引用,导致打包文件臃肿。

  6. 提供公共脚本的文件入口,此文件将被所有页面自动引用。(可设置全局变量,引入公共的库。如Jquery)

关于【Html】

  1. 支持单页应用和多页应用的混合开发。

  2. 自动引入页面的CSS和JS文件。无需手动设置URL。(所有文件hash的改变都会导致文件名改变,这里的资源引用全由内部自动完成)

  3. 如有使用常用的框架和库进行单独打包。(Dll),将需要单独引用dll的vendor.js;

开始

环境配置

  1. 安装node.js

  2. 安装git

依赖配置

确认好你的环境配置,然后就可以开始以下步骤。

$ 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

  • 位于app/view配置html相关的JS和CSS文件。(JS和CSS需与HTML保持一致,可参考现有模版)【更多说明】

  • 高级

    1. 引用字体图标Icon【更多说明】

    2. 使用框架(avalon)或库(jquery)【更多说明】

    3. 设置全局变量。虽引入公共库,但每次调用都需重新声明。所以就有了公共文件来提前声明。【更多说明】

    4. 使用Css预处理器(更多说明)

    5. 使用CDN(更多说明)

    6. 修改目录结构(更多说明)

    最后

    1. 打包文件为build文件夹,请以此为根目录。

    更新日志

    更新详情

    最重要的事情

    项目地址: https://github.com/sayll/avalon-webpack-start

    • 亲不要吝啬自己的Star,到Github右上角Star一下呗。
      webpack2正式优化版,简化操作_第2张图片

    你可能感兴趣的:(less,sass,avalon,webpack,javascript)