easywebpack 是什么


easywebpack 是基于 webpack 的前端工程化解决方案。旨在解决 webpack 项目构建复杂,使用成本高,复用低,维护成本高等工程效率问题。基于 easywebpack 工程化方案, 你能非常简单容易的对各种前端项目进行工程化建设,及时享受最新的特性, 同时你能享受诸如热更新, 多进程极速编译, 性能优化, 惰性加载, TypeScript构建, 单页面构建, 多页面构建, 前端渲染构建, 服务端渲染构建等一体化解决方案.


easywebpack 介绍


首先, 使用 easywebpack 之前,  你需要了解一下 easywebpack 提供的能力:



下面是 webpack 和 easywebpack 配置对比,是不是简单多了。实际项目时,webpack 原生配置更复杂,因为左边的代码还没有考虑 Hot-Reload,devServer,开发与线上配置分离,构建缓存,DLL配置等问题。easywbpack 除了解决这些问题,同时  easywebpack-cli  还提供了强大的开发辅助功能.


                                                                               


easywebpack 基本配置


最简单的配置


// ${app_root}/webpack.config.js
module.exports = {
  // framework 支持 `js`,`html`, `vue`, `react`, `weex`
  framework: 'html' // 增强配置,告诉 easywebpack 使用 easywebpack-html 方案
  entry:{
    home: 'src/home/home.js'
  }
}


常用模板的配置


// ${app_root}/webpack.config.js
module.exports = {
  // framework 支持 `js`,`html`, `vue`, `react`, `weex`
  framework: 'html' // 扩展配置
  entry:{
     home: 'src/home/home.js'
  },
  module:{
    rules:[] // 默认可以不用配置, 添加或扩展请见配置loaders章节  
  },
  pugins:[] // 默认可以不用配置, 添加或扩展请见配置plugins章节  
  done(){
    // Webpack 编译完成回调, 默认可以不用配置,当你需要编译完成做某某事情(比如上传cdn)才需要配置
  }
}


结合 Webpack 原生节点配置


// ${app_root}/webpack.config.js
module.exports = {
  // framework 支持 `js`,`html`, `vue`, `react`, `weex`
  framework: 'html',
  entry:{
     home: 'src/home/home.js'
  },
  externals: {  
    jquery: 'window.$'
  },
  resolve:{
    alias:{},
    extensions:[]
  },
  module:{
    rules:[] // 默认可以不用配置, 添加或扩展请见配置loaders章节  
  },
  plugins:[] // 默认可以不用配置, 添加或扩展请见配置plugins章节 
  done(){
    // Webpack 编译完成回调, 默认可以不用配置,当你需要编译完成做某某事情(比如上传cdn)才需要配置
  }
}



easywebpack 基础能力


easywebpack 在 Webpack 的基础上, 主要做了以下三件事情:


easywebpack 构建解决方案


Egg MVVM 构建解决方案

Egg + Vue Server Side Render 插件



Egg + React Server Side Render 插件



基于 easywebpack 构建的项目骨架

项目骨架, 你可以通过 easywebpack-cli 命令行工具或 clone github 仓库代码进行初始化和构建