/easywebpack

A Simple, Powerful Webpack Front-End Development Solution

Primary LanguageJavaScriptMIT LicenseMIT

easywebpack

NPM version build status Test coverage David deps npm download

基于 Webpack 的前端构建工程化解决方案 easywebpack

安装

npm install easywebpack --save-dev

文档与总结

版本说明

  • easywebpack 5.x.x > Webpack 5.x.x + Babel 7
  • easywebpack 4.x.x > Webpack 4.x.x + Babel 6
    • @easy-team/easywebpack 4.x.x > Webpack 4.x.x + Babel 7
  • easywebpack 3.x.x > Webpack 3.x.x + Babel 6

基础功能

easywebpack

  • 支持服务端渲染, 前端渲染, 静态页面渲染三种构建方式
  • 支持单页面, 多页面服务端渲染构建模式
  • 默认支持 dev,test, prod 环境配置
  • 集成 webpack-hot-middleware 热更新实现, 支持 css inline 和 css extract 热更新
  • 支持 entry 原生配置和目录遍历自动构造 entry 功能
  • 支持自动根据后缀名构建 entry 文件,比如 .vue.jsx 文件为入口文件
  • 支持 es6 class 继承方式编写 Webpack 配置
  • 支持 js/css/image 压缩, 内置支持 CDN 特性
  • 支持 css/sass/less/stylus, 支持css module 和 css extract 特性
  • 支持 loader 是否启用,合并,覆盖配置
  • 支持 plugin 是否启用,合并,覆盖配置
  • 支持 loader 和 plugin npm module 是否启用,按需安装
  • 支持 eslint, postcss 等特性
  • 支持 dll 构建解决方案
  • 支持 webpack typescript 构建
  • 提供 easywebpack-cliwebpack-tool 辅助工具。

easywebpack不与任何框架耦合, 你需要基于现有的解决方案使用或者扩展解决方案使用

工程化

easywebpack

解决方案

基于 easywebpack 基础骨架,目前已扩展 Vue React Weex, HTML, Javascript 五种解决方案:

使用

// ${root}/webpack.config.js
const easywebpack = requier('easywebpack-react');
const env = process.env.BUILD_ENV; // support dev/test/prod
const webpackConfig = easywebpack.getWebpackConfig({
  env,
  target: 'web',
  entry: {
    index: 'src/app.js'
  }
});
module.exports = webpackConfig;

命令行工具

easywebpack-cli 基于 easywebpack 前端工程化解决方案构建的脚手架命令行工具。

  • 支持 Vue/React/Weex/HTML 框架项目的初始化,包括 SPA 应用,多页面应用,Server Side Render(Egg)项目
  • 支持命令行 Webpack 构建,包括 Webpack 配置信息打印(调试)和获取
  • 提供构建结果 UI 导航展现和访问。

项目骨架

以上骨架可以通过 easywebpack-cli 初始化

License

MIT