总体介绍
easywebpack 是什么? easywebpack 是基于 webpack 的前端工程化解决方案。旨在解决 webpack 项目构建复杂,使用成本高,复用低,维护成本高等工程效率问题。基于 easywebpack 工程化方案, 你能非常简单容易的对各种前端项目进行工程化建设，及时享受最新的特...
2019-12-22
快速开始
easywebpack 获取原生 Webpack 配置easywebpack.getWebpackConfig(config) 这种获取方式是指通过解决方案获取配置, 参数 config 支持如下三种配置: config 为 null 或 undefined 时, 目前读取项目根目录下的 w...
2019-12-22
项目实战
快速开始我们可以使用基于 easywebpack 前端工程化解决方案构建的脚手架 easywebpack-cli 初始化各种项目, 目前支持如下骨架项目:multiple-html-boilerplate 纯静态 Webpack + HTML + 页面构建项目骨架vue-client-rend...
2019-12-22
常见问题
Babel 快速升级问题为了更方便升级 Babel7, 同时尽量减少配置且无需安装 @babel 依赖，@easy-team 模式直接内置Babel 7 的相关依赖，只需要把 easywebpack 依赖模式改成 @easy-team/easywebpack 模式，如果代码中直接依赖了也请一并...
2019-12-22
webpack.config.js
webpack.config.js// ${app_root}/webpack.config.js module.exports = { // framework 支持 `js`,`html`, `vue`, `react`, `weex` framework: 'html' e...
2019-12-22
entry
entry 基本配置config.entry : {String|Object} Webpack 构建入口文件配置这里的entry 对 Webpack 的 entry 进行了增强， 除了支持 webpack 原生 Object(key:value) 方式配置， 还对entry进行了增强。We...
2019-12-22
loaders
v3 代表 easywebpack 3.x.x, v4 代表 easywebpack 4.x.x内置配置 loaderseasywebpack 内置了 babel, eslint, css, sass, less, stylus, urlimage, urlfont 等loader,easyw...
2019-12-22
plugins
内置pluginplugin别名默认是否开启/开启环境npm-install-webpack-pluginnpm否webpack.DefinePlugindefine是webpack.NamedModulesPluginnameModule是/devwebpack.HashedModuleId...
2019-12-22
devServer
开发服务easywebpack 整个体系提供的开发构建服务是基于 koa 实现的，用于支持各种类型项目(服务端渲染，前端渲染，静态页面，本地内存编译等)，实现了 内存编译，热更新，发布编译，代理，historyApiFallback等功能，其中代理和historyApiFallback...
2019-12-22
optimizaiton
从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化，你可以通过 optimizaiton 节点进行覆盖配置。在 easywebpack 体系中，会进行进步配置简化。easywebpack 默认配置请根据需要，覆盖默认配置runtimeChunk 默认文件名为 runt...
2019-12-22
deploy
打包配置支持 webpack.config.js 文件配置 和 easyweback-cli 模式, easywebpack-cli@4.3.2 开始支持。注意打部署包时, 如果把 node 和 alinode 打进依赖包里面，请保证打包机器操作系统与线上运行的操作系统...
2019-12-22
扩展配置
webpack.config.js 常用配置1. Egg框架配置 (扩展简化配置)config.egg : {Boolean} 特殊参数, Egg SSR 构建时使用。easywebpack 4.8.0 无需配置，已支持自动检测使用条件:只有在使用 Egg 框架进行 Server Side...
2019-12-22
构建模式
easywebpack-cli 支持两种开发构建模式： easywebpack 增强模式 和 原生 webpack 模式， 同时在最新相关解决方案中，该文件非必须，也就是可以零配置。easywebpack 增强模式（默认）easywebpack 增强模式时， webpack.config.j...
2019-12-22
开发调试
当我们使用 easywebpack 时， 遇到构建问题时，我们可以通过 easywebpack-cli 的 easy print 命令检查一下生成的 webpack config 配置是否正确。默认读取项目根目录下的 webpack.config.js 配置, 你可以通过 -f 参数指定指...
2019-12-22
热更新
easywebpack 是通过 koa-webpack-hot-middleware 和 koa-webpack-dev-middleware 插件实现热更新机制。具体实现封装成独立 webpack-tool 插件，该插件除了集成在 easywebpack 里面，同时也可以单独使用。下面详细说...
2019-12-22
Css Style
开启 Sass （默认禁用）webpack.config.js// ${app_root}/webpack.config.js module.exports = { module:{ rules:[ { scss: true } ...
2019-12-22
PostCss
默认配置// postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ overrideBrowserslist: ['iOS >= 7', 'Android >= 4.0'] }...
2019-12-22
域名代理
本地开发域名代理构建支持前提：代理域名能够映射到本机ip地址的功能需要你自己在电脑上面配置。如果是实际的存在的域名，理论上面就不需要自己配置域名映射。该功能只在 Egg 应用构建本地开发使用。在 Egg SSR 应用开发时，Egg 应用的访问地址， 静态资源构建的地址， HMR 地址都是 ip...
2019-12-22
全局常量
easywebpack 内置全局常量easywebpack 通过 webpack.DefinePlugin webpack 插件内置了如下全局常量, 方便业务使用。process.env.NODE_ENV首先会获取用户 process.env.NODE_ENV 值, 如果获取不到，当构建 pr...
2019-12-22
资源依赖
easywebpack 静态资源 manifest 文件easywebpack 3.5.0 新增自定义插件 webpack-manifest-resource-plugin 替换 webpack-manifest-plugin。 之前的 manifest 依赖关系是在 Egg 运行期间解析的，...
2019-12-22
公共提取
Webpack CommonsChunk 公共代码提取easywebpack 4.10.0 开始，底层通过 optimization 实现公共提取，支持公共 js 和 css 提取, 提取的公共 chunk 文件名默认为 common . 默认是提取的是 node_modules 下依赖...
2019-12-22
极速编译
DLL 公共提取Webpack 通过 DLLPlugin 和 DLLReferencePlugin 可以实现公共类库的单独提取，能极大大提升了构建的速度.只需要在 webpack.config.js 文件添加 dll 节点配置即可完成 dll 整个流程。module.exports = { dll:['vue','vuex','axios'] } 详细方案：Webpack DLL 工程化实现开启 cache-loader...
2019-12-22
DLL 构建
Webpack Dll 构建在 3.5.0 版本之前，webpack 构建随着项目越来越来大，打包也就越来越慢; 同时 dll 工程化构建也没有内置支持。虽然可以通过在 easywebpack 中添加 new webpack.DllPlugin() 和 webpack.DllReference...
2019-12-22
CDN 构建
基本配置easywebpack 提供了 cdn 配置节点, 只需要配置 cdn 地址即可(cdn地址会覆盖publicPath地址).配置如下:easywebpack3 配置后 dev，test， prod 模式都会生效, 一般通过变量控制 cdn 节点的配置// ${app_root}/webpack.config.js module.exports = { ...... cdn:UPLOAD_CDN ? { url: 'http://xxx.cdn.com/public/...
2019-12-22
PWA 支持
service-worker 生成easywebpack 3.7.0 内置支持 service-worker.js 生成, 该功能是通过 service-worker-precache-webpack-plugin实现的。你可以通过如下方式开启， 默认禁用。//${app_root}/webpack.config.js module.exports = { plugins:{ serviceworker:true } } 开启后, easywebpack 会自动生成 service...
2019-12-22
TypeScript
TypeScript 构建支持在用 TypeScript 编写 Vue 应用时， Vue 里面的 TypeScript 代码建议不要写在 Vue 文件里面，请以单独 ts 文件存放 TypeScript 代码。目前测试发现与 thread-loader 一起使用是有问题的。easywebpac...
2019-12-22
Css Module
easywepack4easywebpack4 默认提供 /\.module\.(css|less|scss|stylus)/ 的文件规范的 CSS Module 特性，把 css module 的样式文件改成 /\.module\.(css|less|scss|stylus)/ 规范，这...
2019-12-22
静态资源
import 方式引入在组件中直接 import js 和 css 公共文件, 这种引入会进行 Webpack 编译，比如压缩import 'asset/css/global.css' import 'asset/js/common.js' 文件拷贝模式借助 copy-webpack-plugin 进行文件拷贝，copy 插件已在 easywebpack@4.8.5 内置支持，然后页面通过 link 标签引入。注意拷贝的文件不会压缩和hash...
2019-12-22
Babel 配置
Babel 版本说明easywebpack 体系目前内置 Babel 为 6 ，因涉及底层改动以及兼容等问题，为了保证现有已经运行项目的稳定性，暂还没有从框架层进行内置修改，目前提供两种方式进行升级 Babel 7。方式一：使用 @easy-team 插件依赖为了更方便升级 Babel7, 同...
2019-12-22
Babel 升级
easywebpack 体系目前内置 Babel 为 6 ，因涉及底层改动以及兼容性等问题，为了保证现有已经运行项目的稳定性，暂还没有从框架层进行内置修改，目前提供两种方式进行升级 Babel 7。方式一：基于 easy-team 插件模式 Babel 快速升级方案为了更方便升级 Babel7...
2019-12-22
构建速度
检测构建速度最新的 easywebpack-cli@4.0.0 可以通过 easy build --speed 检测 Webpack 各 loader 和 plugin 处理耗时。DLL 公共提取Webpack 通过 DLLPlugin 和 DLLReferencePlugin 可以实现公共类库的单独提取，能极大大提升了构建的速度.只需要在 webpack.config.js 文件添加 dll 节点配置即可完成 dll 整个流程。
2019-12-22
构建大小
easywebpack-cli 构建大小分析在项目开发时， 当页面构建的文件太大, 我们可以直接通过 cli 提供功能进行构建大小分析通过 -s 参数启动构建大小分析工具, 支持 analyzer(webpack-bundle-analyzer) 和 stats(stats-webpack-plugin) , 默认用 analyzer 插件。如果运行时, 提示安装缺少插件，请先安装依赖开发模式分析easy build -s 测试模式分析, 移除开发辅助代码easy build test -s...
2019-12-22
基础配置
在使用相关方案时, 请在项目中添加 babel 和 postcss 基础配置文件添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置，以下仅仅是举例：{ "presets": [["env",{ "modules": false }]], "plugins": [ "transform-object-rest-spread"...
2019-12-22
Vue 项目构建
Webpack 原始配置编写// webpack.config.js const easywebpack = require('easywebpack-vue'); const webpack = easywebpack.webpack; const merge = easywebpack.merge; const env = process.env.BUILD_ENV; const baseWebpackConfig = easywebpack.getWebpackConfig...
2019-12-22
React 项目构建
Webpack 原始配置编写// webpack.config.js const easywebpack = require('easywebpack-react'); const webpack = easywebpack.webpack; const merge = easywebpack.merge; const env = process.env.BUILD_ENV; const baseWebpackConfig = easywebpack.getWebpackConfig...
2019-12-22
Vue 单页面举例
easywebpack-vue 构建单页面应用Vue + Vuex + Vue-Router 基本实现router/index.js 实现// router/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; import ListView from './list'; import DetailView from './detail...
2019-12-22
Vue 多页面举例
基于 easywebpack-cli 模式构建Vue前端渲染项目一. 全局安装 easywebpack-cli 插件npm i easywebpack-cli -g 安装成功以后, 就可以在命令行中使用 easy 或 easywebpack 命令, 比如 easy build, easy server, easy print 等二. 添加 webpack.config.js 配置在项目根目录添加 webpack.config.js 文件, 添加如下配置const path = require(...
2019-12-22
JS 文件打包
我们经常会遇到单独对 JS 打包的场景，比如 es6 写的 npm 包需要构建成 es5 模式. easywebpack 也提供了对应的解决方案： easywebpack-js基于 easywebpack-js 构建配置编写// build/index.js const easywebpack = require('easywebpack-js'); const config = { env: process.env.BUILD_ENV, entry: { ...
2019-12-22
Vue 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置，以下仅仅是举例. 详细配置见：https://www.yuque.com/easy-team...
2019-12-22
React 工程方案
安装 easywebpack-cli 工具npm install easywebpack-cli -g添加 ${app_root}/.babelrc 文件具体根据实际情况添加相关 babel 插件配置，以下仅仅是举例. 详细配置见：https://www.yuque.com/easy-team...
2019-12-22
HTML 工程方案
easywebpack-html 纯静态页面构建解决方案支持纯静态页面构建支持 nunjucks 模版方式构建如何利用 easywebpack-cli工具快速获得一个骨架项目使用easy-cli你将得到一个具备以下能力的骨架项目:基于Nunjucks模版引擎的模版项目。Why? 借助模版引擎...
2019-12-22
JS 打包工程方案
我们经常会遇到单独对 JS 打包的场景，比如 es6 写的 npm 包需要构建成 es5 模式. easywebpack 也提供了对应的解决方案： easywebpack-js基于 easywebpack-js 构建配置编写// build/index.js const easywebpac...
2019-12-22
Weex 工程方案
easywebpack-weex 基于 easywebpack 的 Weex Native 和 Weex Web 打包构建解决方案.安装$ npm i easywebpack-weex --save-dev使用const weex = require('easywebpack-weex'); ...
2019-12-22
Egg Vue 工程方案
2019-12-22
Egg React 工程方案
2019-12-22
Node Vue SSR 框架
2019-12-22
Node React SSR 框架
2019-12-22
版本历史
easywebpack 版本发布说明easywebpack4 -> Webpack4支持 Webpack 4 插件版本easywebpack: ^4.x.xeasywebpack-cli: ^3.x.xeasywebpack-vue: ^4.x.xeasywebpack-react: ^4.x.xeasywebpack-html: ^4.x.xeasywebpack-js: ^4.x.xegg-webpack: ^4.x.xwebpack-tool: ^4.x.xwebpack-manifest...
2019-12-22
升级指南
Webpack 3 到 Webpack 4 经过重大更新，对应 easwebpack3 到 easywebpack4 也有相对性的更新，主要包括以下3点：Webpack 版本升级导致的配置优化和优化修改easywebpack 新特性支持和配置简化easywebpack 遗留问题修复以及去掉历史兼容 ...
2019-12-22
更新历史
方案说明Webpack4插件版本easywebpack: ^4.x.xeasywebpack-cli: ^4.x.xeasywebpack-vue: ^4.x.xeasywebpack-react: ^4.x.xeasywebpack-html: ^4.x.xeasywebpack-js: ^...
2019-12-22
交流反馈
欢迎有兴趣的开发者参与！邮箱 hubcarl@126.comGitHubhttps://github.com/hubcarl知乎https://zhuanlan.zhihu.com/easywebpackQQ群有问题可以直接在在语雀评论回复(^_^)
2019-12-22