easywebpack 是什么

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

easywebpack 介绍

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

  • easywebpack 简化配置:easywebpack 是 Webpack 的上层框架。在支持 Webpack 原生节点配置基础之上, 对 Webpack 常用配置进行封装简化, 同时增强部分配置能力和扩展部分配置,简化配置复杂性。 通过简单的 Webpack 配置让开发者从复杂的各种具体 loader, plugin 中解脱出来. 按照一定规范可以做到零配置。

  • easywebpack 提供强大的扩展配置能力: easywebpack 本身不提供任何前端框架的构建能力, 需要你基于 easywebpack 扩展出对应前端框架的构建解决方案, 目前已扩展出 Vue/React/Weex/HTML/JS 解决方案, 你可以直接使用这些解决方案。如果不满足,你可以基于已有方案扩展出自己的解决方案。

  • *easywebpack 极速编译和特性支持: *easywebpack 通过工程化方式解决编译速度和打包大小问题(提供缓存编译,多进程编译,DLL, Service Worker等)。

  • easywebpack 提供强大的工具链:easywebpack 提供强大的工具链支持开发打包,构建大小优化,多种骨架项目(Vue/React/SSR/Weex/JS/HTML)初始化功能。

下面是 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 的基础上, 主要做了以下三件事情:

  • 支持 Webpack 原生节点配置,同时增强部分配置能力和扩展部分配置,简化配置复杂性

  • 内置与构建框架无关的基础配置, 包括通用基础配置, 通用 loader, 通用 plugin. 详情请见 内置loader内置plugin

  • 内置热更新, image/javascript/css压缩, sass, less, stylus, postcss, eslint, babel等基础能力, 通过开关即可开启和禁用

  • 内置开发, 测试, 正式三种环境, 简化开发者配置

easywebpack 构建解决方案

Egg MVVM 构建解决方案

Egg + Vue Server Side Render 插件

Egg + React Server Side Render 插件

基于 easywebpack 构建的项目骨架

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


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
JS 文件打包 JS 文件打包
我们经常会遇到单独对 JS 打包的场景,比如 es6 写的 npm 包需要构建成 es5 模式.
2020-04-18 sky
Next 
JS 打包工程方案 JS 打包工程方案
我们经常会遇到单独对 JS 打包的场景,比如 es6 写的 npm 包需要构建成 es5 模式. easywebpack 也提供了对应的解决方案: easywebpack-js基于 easywebpack-js 构建配置编写// build/index.js const easywebpac...
2020-04-18 sky