Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655
Typescript (251,857
Vue (81,071
Reactjs (72,668
Stylus (1,148
Webpack4 (1,088
Server Side Rendering (818
Single Page App (662
Hot Reload (355
Weex (233
Related Projects