1 | # easywebpack
|
2 |
|
3 | [![NPM version][npm-image]][npm-url]
|
4 | [![build status][travis-image]][travis-url]
|
5 | [![Test coverage][codecov-image]][codecov-url]
|
6 | [![David deps][david-image]][david-url]
|
7 | [![npm download][download-image]][download-url]
|
8 |
|
9 | [npm-image]: https://img.shields.io/npm/v/easywebpack.svg?style=flat-square
|
10 | [npm-url]: https://npmjs.org/package/easywebpack
|
11 | [travis-image]: https://img.shields.io/travis/easy-team/easywebpack.svg?style=flat-square
|
12 | [travis-url]: https://travis-ci.org/easy-team/easywebpack
|
13 | [codecov-image]: https://codecov.io/gh/easy-team/easywebpack/branch/master/graph/badge.svg
|
14 | [codecov-url]: https://codecov.io/gh/easy-team/easywebpack
|
15 | [david-image]: https://img.shields.io/david/easy-team/easywebpack.svg?style=flat-square
|
16 | [david-url]: https://david-dm.org/easy-team/easywebpack
|
17 | [snyk-image]: https://snyk.io/test/npm/easywebpack/badge.svg?style=flat-square
|
18 | [snyk-url]: https://snyk.io/test/npm/easywebpack
|
19 | [download-image]: https://img.shields.io/npm/dm/easywebpack.svg?style=flat-square
|
20 | [download-url]: https://npmjs.org/package/easywebpack
|
21 |
|
22 |
|
23 | 基于 Webpack 的前端构建工程化解决方案 [easywebpack](https://zhuanlan.zhihu.com/p/28322014)
|
24 |
|
25 | ## 安装
|
26 |
|
27 | ```bash
|
28 | npm install easywebpack-vue --save-dev
|
29 | ```
|
30 |
|
31 | ## 文档与总结
|
32 |
|
33 | - https://www.yuque.com/easy-team/easywebpack
|
34 | - https://zhuanlan.zhihu.com/easywebpack
|
35 |
|
36 | ## 版本说明
|
37 |
|
38 | - easywebpack 4.x.x > webpack 4.x.x
|
39 | - easywebpack 3.x.x > webpack 3.x.x
|
40 |
|
41 |
|
42 | ## 基础功能
|
43 |
|
44 | ![easywebpack](https://github.com/easy-team/easywebpack/blob/master/docs/images/easywebpack.png)
|
45 |
|
46 | - 支持服务端渲染, 前端渲染, 静态页面渲染三种构建方式
|
47 | - 支持单页面, 多页面服务端渲染构建模式
|
48 | - 默认支持 `dev`,`test`, `prod` 环境配置
|
49 | - 集成 `webpack-hot-middleware` 热更新实现, 支持 css inline 和 css extract 热更新
|
50 | - 支持 entry 原生配置和目录遍历自动构造 entry 功能
|
51 | - 支持自动根据后缀名构建 entry 文件,比如 `.vue` 和 `.jsx` 文件为入口文件
|
52 | - 支持 es6 class 继承方式编写 Webpack 配置
|
53 | - 支持 js/css/image 压缩, 内置支持 CDN 特性
|
54 | - 支持 css/sass/less/stylus, 支持css module 和 css extract 特性
|
55 | - 支持 loader 是否启用,合并,覆盖配置
|
56 | - 支持 plugin 是否启用,合并,覆盖配置
|
57 | - 支持 loader 和 plugin npm module 是否启用,按需安装
|
58 | - 支持 eslint, postcss 等特性
|
59 | - 支持 dll 构建解决方案
|
60 | - 支持 webpack typescript 构建
|
61 | - 提供 `easywebpack-cli` 和 `webpack-tool` 辅助工具。
|
62 |
|
63 | **easywebpack不与任何框架耦合, 你需要基于现有的解决方案使用或者扩展解决方案使用**
|
64 |
|
65 |
|
66 | ## 工程化
|
67 |
|
68 | ![easywebpack](https://github.com/easy-team/easywebpack/blob/master/docs/images/easywebpack.solution.png)
|
69 |
|
70 | ### 解决方案
|
71 |
|
72 | 基于 `easywebpack` 基础骨架,目前已扩展 `Vue` `React` `Weex`, `HTML`, `Javascript` 五种解决方案:
|
73 | - [easywebpack-js](https://github.com/easy-team/easywebpack-js.git) 支持纯 javascript 文件构建模式
|
74 | - [easywebpack-vue](https://github.com/easy-team/easywebpack-vue.git) 支持 Vue 纯前端构建和Node端构建模式
|
75 | - [easywebpack-react](https://github.com/easy-team/easywebpack-react.git) 支持 React 纯前端构建和Node端构建模式
|
76 | - [easywebpack-weex](https://github.com/easy-team/easywebpack-weex.git) 支持 Native 和 Web 构建模式
|
77 | - [easywebpack-html](https://github.com/easy-team/easywebpack-html.git) 支持 HTML静态页面模式,支持 nunjucks 引擎
|
78 |
|
79 |
|
80 | ### 命令行工具
|
81 |
|
82 | [easywebpack-cli](https://github.com/easy-team/easywebpack-cli.git) 基于 easywebpack 前端工程化解决方案构建的脚手架命令行工具。
|
83 |
|
84 | - 支持 Vue/React/Weex/HTML 框架项目的初始化,包括 SPA 应用,多页面应用,Server Side Render(Egg)项目
|
85 | - 支持命令行 Webpack 构建,包括 Webpack 配置信息打印(调试)和获取
|
86 | - 提供构建结果 UI 导航展现和访问。
|
87 |
|
88 |
|
89 | ### 项目骨架
|
90 |
|
91 | - [easywebpack-cli-template](https://github.com/easy-team/easywebpack-cli-template) Vue/React/Weex 纯前端项目骨架
|
92 |
|
93 | - [egg-vue-webpack-boilerplate](https://github.com/easy-team/egg-vue-webpack-boilerplate) Egg + Vue 服务端渲染骨架
|
94 |
|
95 | - [egg-vue-webpack-spa-boilerplate](https://github.com/easy-team/egg-vue-webpack-boilerplate/tree/feature/green/spa) Egg + Vue 单页面服务端渲染骨架
|
96 |
|
97 | - [egg-vue-webpack-mpa-boilerplate](https://github.com/easy-team/egg-vue-webpack-boilerplate/tree/feature/green/multi) Egg + Vue 多页面服务端渲染骨架
|
98 |
|
99 | - [egg-vue-typescript-boilerplate](https://github.com/easy-team/egg-vue-typescript-boilerplate) Egg + Vue + TypeScript + Webpack 服务端渲染骨架
|
100 |
|
101 | - [egg-react-webpack-boilerplate](https://github.com/easy-team/egg-react-webpack-boilerplate) Egg + React 服务端渲染骨架
|
102 |
|
103 | - [egg-react-webpack-spa-boilerplate](https://github.com/easy-team/egg-react-webpack-boilerplate/tree/feature/green/spa) Egg + React 单页面服务端渲染骨架
|
104 |
|
105 | - [egg-react-webpack-mpa-boilerplate](https://github.com/easy-team/egg-react-webpack-boilerplate/tree/feature/green/multi) Egg + React 多页面服务端渲染骨架
|
106 |
|
107 | - [egg-react-typescript-boilerplate](https://github.com/easy-team/egg-react-typescript-boilerplate) Egg + React + TypeScript + Webpack 服务端渲染骨架
|
108 |
|
109 | - [easywebpack-weex-boilerplate](https://github.com/easy-team/easywebpack-weex-boilerplate) Weex Native 和 Web 构建骨架项目
|
110 |
|
111 | - [easywebpack-multiple-html-boilerplate](https://github.com/easy-team/easywebpack-multiple-html-boilerplate) 静态页面构建方案骨架,支持纯 HTML 构建 和 nunjucks 构建。
|
112 |
|
113 | **以上骨架可以通过 easywebpack-cli 初始化**
|
114 |
|
115 | ## License
|
116 |
|
117 | [MIT](LICENSE) |
\ | No newline at end of file |