Webpack工程化解决方案easywebpack

1.概要

随着越来越多的项目采用 Vue, React, Weex 进行业务开发, 在前端构建方面大多数是用webpack进行构建。但存在以下问题：

各个项目都是自己从零编写 Webpack 配置，存在很多定制性的配置，无法复用，大多都是复制拷贝。
Webpack 配置项多，繁杂，社区插件有非常多，往往不知道哪个到底可以用，存在什么问题，需要各自摸索。当需要满足开发环境，正式环境，js/css/image压缩，css extract, css module, sass, less, stylus, postcss, babel, cdn，单页面，多页面，热更新, 前端渲染，服务器渲染等特性时，配置非常复杂。在这种情况下，急需一套稳定的 Webpack 配置骨架，简化项目使用难度和维护成本。

最近半年来，基于 Webpack(Vue,Weex) 经过实际项目的不断迭代和大家的建议，在前端渲染，单页面渲染，服务端渲染等方面都进行过实际项目的实践，在此基础上面沉淀出一套建基于 Webpack 通用基础配置且可扩展性强的前端工程化解决方案 easywebpack。

2.easywebpack功能介绍

easywebpack 是在 Webpack 上扩展出来的前端项目构建工程化解决方案, 同时支持 Vue，React 服务端端渲染构建，也支持 Weex Nativ 和 Web 构建. 同时内置 Webpack 常用功能和基础插件，支持插件动态安装，功能开启，框架扩展等特性。

目前 easywebpack 已支持 Webpack3(easywebpack 3.x.x) 和 Webpack2(easywebpack 1.x.x)，很多新特性可以马上尝鲜了。另外支持 Mac 和 Window 系统（被 Windows 坑了好久，如果可以，尽可能用 Mac)。

  • 首先我们看看 easywebpack 具备的基础功能：
easywebpack.png
  • 基于 easywebpack 实现的解决方案
webpack-project.png

2.1 基础功能

  • 支持服务端渲染, 前端渲染, 静态页面渲染三种构建方式
  • 支持单页面, 多页面服务端渲染构建模式
  • 默认支持 dev,test, prod 环境配置
  • 集成 webpack-hot-middleware 热更新实现
  • 支持 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 等特性
  • 提供 easywebpack-cli 和 webpack-tool 辅助工具。

2.2 内置loader

  • babel-loader
  • eslint-loader
  • style-loader
  • css-loader
  • postcss-loader
  • sass-loader
  • less-loader
  • stylus-loader
  • url-loader

2.3 内置plugin

  • extract-text-webpack-plugin
  • npm-install-webpack-plugin
  • webpack.optimize.ModuleConcatenationPlugin
  • webpack.NoEmitOnErrorsPlugin
  • webpack.ProvidePlugin
  • webpack.DefinePlugin
  • webpack.optimize.CommonsChunkPlugin
  • webpack.optimize.UglifyJsPlugin
  • webpack.HotModuleReplacementPlugin
  • progress-bar-webpack-plugin
  • imagemin-webpack-plugin
  • directory-named-webpack-plugin
  • webpack.NormalModuleReplacementPlugin
  • webpack.IgnorePlugin
  • html-webpack-plugin

3.已有解决方案

基于 easywebpack 基础骨架，目前已扩展 Vue React Weex 三种解决方案，其中 easywebpack-vue 和 easywebpack-react 支持纯前端构建和Node端构建模式，easywebpack-weex 支持 Native 和 Web 构建模式。

如果你需要基于 easywebpack 扩展其他解决方案也很简单， 只需要继承 easywebpack 的 WebpackClientBuilder(前端渲染构建模式) 和 WebpackServerBuilder(服务端渲染构建模式) 即可, 你只需要把框架相关的扩展进来即可。 大概实现如下：

4.解决方案扩展实现

4.1 前端渲染构建模式

const EasyWebpack = require('easywebpack');
class WebpackClientBuilder extends EasyWebpack.WebpackClientBuilder {
constructor(config) {
super(config);
// call below api custom client builder
}
}
module.exports = WebpackClientBuilder;

4.2 服务端渲染构建模式

const EasyWebpack = require('easywebpack');
class WebpackServerBuilder extends EasyWebpack.WebpackServerBuilder {
constructor(config) {
super(config);
// call below api custom server builder
}
}
module.exports = WebpackServerBuilder;

具体实现请参考 easyebpack-vue｀,｀easyebpack-react, easyebpack-weex

5.命令行工具

5.1 easywebpack-cli 命令行工具

  • Vue, React, Weex 骨架项目初始化工具， 支持纯前端项目和Egg项目
  • 提供命令行 easywebpack 或 easy 命令编译项目和启动静态功能
  • 依赖 webpack-tool 工具构建

5.1.1 特性

5.1.2 安装

$ npm i easywebpack-cli -g

5.1.3 运行

easywebapck -h

Usage: easywebpack [command] [options]
Options:

-V, --version output the version number
-f, --filename [path] webpack config file name, default webpack.config.js
-w, --watch webpack watch and hot-update
-m, --hash webpack md5 hash js/css/image
-c, --compress webpack compress js/css/image
-b, --build [option] w(watch), m(hash) , c(compress), ex: wm/wc/mc/wmc
-h, --help output usage information

Commands:

init [options] init webpack config or boilerplate for Vue/React/Weex
install npm install
print [env] [options] print webpack config, support print by env or config node key
build [env] webpack building
server [env] webpack building and start server

5.1.4. 命令介绍

1. 配置模板和Boilerplate初始化
  • easywebpack init

step one:

cli-init-step-one.png

step two:

cli-init-step-two.png
2. 编译举例
  • easywebpack build
  • easywebpack build -f build/webpack.config.js
  • easywebpack build -c
  • easywebpack build dev
  • easywebpack build test
  • easywebpack build prod
  • easywebpack build -b wmc

默认读取项目根目录下的 webpack.config.js 配置

3. 编译和启动服务举例
  • easywebpack server
  • easywebpack server -f build/webpack.config.js
  • easywebpack server dev
  • easywebpack server test
  • easywebpack server prod
  • easywebpack server -b wmc

默认读取项目根目录下的 webpack.config.js 配置

4. 打印配置
easywebpack print -h

Usage: print [env] [options]
print webpack config, support print by env or config node key

Options:
-n, --node [key] print webpack config info by config node key, example: [module/module.rules/plugins] and so on
-h, --help output usage information

  • easywebpack print -n module
  • easywebpack print dev -n entry
  • easywebpack print test -n module.rules
  • easywebpack print prod -n module.rules[0]
  • easywebpack print -n plugins
  • easywebpack print -n plugins[0]
  • easywebpack print -n output
  • easywebpack print -n resolve

默认读取项目根目录下的 webpack.config.js 配置
GitHub:https://github.com/hubcarl/easywebpack-cli

5.2 webpack-tool 命令行工具

webpack-tool 是一个纯粹的 Webpack 构建工具， 不依赖任何框架， 支持以下特性：

  • 提供 Webpack 配置编译功能
  • 提供 Webpack 编译结果文件UI视图导航和访问功能
使用
//build/index.js
const WebpackTool = require('webpack-tool');
const weexNativeConfig = require('./weex/native');
const weexWebConfig = require('./weex/web');
const NODE_ENV = process.env.VIEW;
const webpackConfig = [weexNativeConfig, weexWebConfig];
const webpackTool = new WebpackTool();
if (NODE_ENV === 'development') {
  // start webpack build and show build result ui view
  webpackTool.server(webpackConfig);
} else {
  webpackTool.build(webpackConfig);
}
build-navigation.png

6.项目构建方案配置案例

6.1 纯前端项目配置和构建

假如要实现基于 Vue 或者 React 实现一个纯前端渲染项目改如何配置 webpack.config.js.

6.1.1 项目结果要求如下：

project.png
  • 支持单页面和多页面entry配置
  • 支持根据 .vue 或者 .react 构建入口文件
  • 支持根据目录遍历， 项目page根目录为 page
  • 支持热更新，支持css extract， 支持 css和sass(默认支持)，支持构建预览
  • 支持cdn配置，支持构建完成回调用于编写自定义逻辑
  • 支持公共文件抽取，抽取文件默认为 vendor.js
  • 支持 es6 编写
  • 支持js/css/image压缩和hash
  • 支持eslint，babel， postcss
  • 支持dev(不压缩，无hash，支持热更新)和 prod(压缩hash，css exteract） 配置

6.1.2 基于 easywebpack-vue 和 easywebpack-cli

上面的要求 easywebpack-vue 都支持，其中 支持eslint，babel， postcss 和 autoprefixer是默认开启

  • 按照上面的截图新建好项目，或者可以通过 easywebpack-ci 工具初始化完成

  • 项目安装 easywebpack-vue 解决方案依赖

    npm install easywebpack-vue --save-dev

  • 编写 ${project}/webpack.config.js配置

const BUILD_ENV = process.env.BUILD_ENV;
const cdn = BUILD_ENV === 'prod' ? { url: 'http://your.cdn.com'} : '',
module.exports = {
  type: 'client, // 指定只构建前端渲染
  framework: 'vue', // 支持 react／weex
  entry: {
    include: 'page',
    exclude: ['page/test'],
    template: 'view/layout.html'
  }
  loader: {
    client: 'framework/vue/entry/client-loader.js'
  }
  alias: {
    asset: 'asset',
    component: 'component',
    framework: 'framework',
    store: 'store'
  },
  cdn,
  done(){ // 编译完成
  // 这里可以做你想做的事情哟，比如 打包上传 CDN
    if(cdn && cdn.url){
    }
  }
}

只需要配上面这么多， 就可以 Running 了，因为 easywebpack-vue 把 babel，postcss，sass都默认支持了，当然你可以扩展。

  • 命令行编译

首先请安装 easywebpack-ci 工具, 然后就可以用 easywebpack 或 easy 命令
npm install easywebpack-ci -g

  • 命令行启动运行
easywebpack server 或 easywebpack server dev
easywebpack server prod
  • 命令行编译，默认开发模式
easywebpack build 或 easywebpack build dev
easywebpack build prod
  • 获取 Webpack 配置结果
const EasyWebpack = require('easywebpack-vue');
const webpackConfigList = EasyWebpack.getWebpackConfig()

6.1.3 基于 easywebpack-react 和 easywebpack-cli

如果要用react实现类似功能， 请把上面 framework 改为 react

6.2 Vue/React Server Side Render 配置

如果要基于上面的要求实现一个 Vue /React 服务端渲染的构建配置， 该如何配置，非常简单。

6.2.1 构建配置

  • copy 一份上面的配置
  • 去掉 type:client 配置
  • 如果 react，framework配置改为 'framework: react'， 另外安装 easywebpack-react 依赖
  • 添加 server loader template, 请查看配置举例。
loader: {
  client: 'framework/vue/entry/client-loader.js',
  server: 'framework/vue/entry/server-loader.js'
}

完整结构如下：

const BUILD_ENV = process.env.BUILD_ENV;
const cdn = BUILD_ENV === 'prod' ? { url: 'http://your.cdn.com'} : '',
module.exports = {
  framework: 'vue', // 支持 react／weex
  entry: {
    include: 'page',
    exclude: ['page/test'],
    template: 'view/layout.html'
  }
  loader: {
   client: 'framework/vue/entry/client-loader.js',
   server: 'framework/vue/entry/server-loader.js'
  }
  alias: {
    asset: 'asset',
    component: 'component',
    framework: 'framework',
    store: 'store'
  },
  cdn,
  done(){ // 编译完成
    // 这里可以做你想做的事情哟，比如 打包上传 CDN
    if(cdn && cdn.url){
    }
  }
}

6.2.2 结合 Vue vue-server-renderer 做服务端渲染， 核心代码如下：

const renderer = require('vue-server-renderer');
// filepath 为 Webpack 构建的服务端代码
const bundleRenderer = renderer.createBundleRenderer(filepath, renderOptions);
// data 为 Node端获取到的数据
const context = { state: data };
return new Promise((resolve, reject) => {
  bundleRenderer.renderToString(context, (err, html) => {
  if (err) {
    reject(err);
  } else {
    resolve(html);
  }
});

请参考 egg-view-vue 和 egg-view-vue-ssr 实现： egg-view-vue 和 egg-view-vue-ssr

拿到服务端渲染的 html 后，可以根据 manifest 资源依赖注入 css,js 等依赖，实际项目这里要考虑缓存。完整的基于 koa， express 项目请参考下面要介绍的 Egg + Vue 服务端渲染实现。

6.2.3 结合 React react-dom/server 做服务端渲染， 核心代码如下：

const React = require('react');
const ReactDOMServer = require('react-dom/server');

请参考 egg-view-react 和 egg-view-react-ssr 实现： egg-view-react 和 egg-view-react-ssr

拿到服务端渲染的 html 后，可以根据 manifest 资源依赖注入 css,js 等依赖，实际项目这里要考虑缓存。完整的基于 koa， express 项目请参考下面要介绍的 Egg + React 服务端渲染实现。

6.3 Egg + Vue 服务端渲染(Server Side Render)配置

如果要基于上面的要求实现一个 Egg + Vue 服务端渲染的构建配置， 我们服务端渲染的配置基础上面增加 egg: true 配置即可。

6.3.1 完整配置结构如下：

const BUILD_ENV = process.env.BUILD_ENV;
const cdn = BUILD_ENV === 'prod' ? { url: 'http://your.cdn.com'} : '',

module.exports = {
  egg: true,
  framework: 'vue', // 支持 react／weex
  entry: {
    include: 'page',
    exclude: ['page/test'],
    template: 'view/layout.html'
  }
  loader: {
    client: 'framework/vue/entry/client-loader.js',
    server: 'framework/vue/entry/server-loader.js'
  }
  alias: {
    asset: 'asset',
    component: 'component',
    framework: 'framework',
    store: 'store'
  },
  cdn,
  done(){ // 编译完成
    // 这里可以做你想做的事情哟，比如 打包上传 CDN
    if(cdn && cdn.url){
    }
  }
}

6.3.2 安装相关配置插件

项目骨架: egg-vue-webpack-boilerplate

6.4 Egg + React 服务端渲染(Server Side Render)配置

如果要基于上面的要求实现一个 Egg + React 服务端渲染的构建配置，我们服务端渲染的配置基础上面增加 egg: true即可。

完整结构如下：

const BUILD_ENV = process.env.BUILD_ENV;
const cdn = BUILD_ENV === 'prod' ? { url: 'http://your.cdn.com'} : '',
module.exports = {
  egg: true,
  framework: 'react', // 支持 react／weex
  entry: {
  include: 'page',
  exclude: ['page/test'],
  template: 'view/layout.html',
  loader: {
    client: 'framework/vue/entry/client-loader.js',
    server: 'framework/vue/entry/server-loader.js'
  },
  alias: {
    asset: 'asset',
    component: 'component',
    framework: 'framework',
    store: 'store'
  },
  cdn,
  done(){ // 编译完成
    // 这里可以做你想做的事情哟，比如 打包上传 CDN
    if(cdn && cdn.url){
    }
  }
}

骨架项目请见： egg-react-webpack-boilerplate

6.5 Weex Native 和 Web 双端模式构建

假如要实现基于 Weex + Vue 构建配置项目该如何配置 webpack.config.js. 除了上面的要求外，还需要支持 Native 和 Web 构建。 基于 easywbpack-weex 配置也非常简单， 只需要 把 framework 配置为 weex 即可。

  • 首先安装 easywbpack-weex 
npm i easywbpack-weex --save-dev
  • webpack.config.js 配置如下：
module.exports = {
  egg: true,
  framework: 'weex',
  entry: {
    include: 'page',
    exclude: ['page/test'],
    template: 'view/layout.html'
  } 
  alias: {
    asset: 'asset',
    component: 'component',
    framework: 'framework',
    store: 'store'
  },
  done(){ // 编译完成
   // 这里可以做你想做的事情哟
  }
}
  • 获取 Webpack Config 配置
const EasyWebpack = require('easywebpack-weex');
const webpackConfigList = EasyWebpack.getWebpackConfig()
  • 开发运行
easy server dev
easy server test
easy server prod
  • 编译
easy build dev
easy build test
easy build prod

骨架项目请见： easywebpack-weex-boilerplate

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • Egg + Vue 服务端渲染工程化建设
    在实现 egg + vue 服务端渲染工程化实现之前，我们先来看看前面两篇关于Webpack构建和Egg的文章： ...
    hubcarl阅读 5,999评论 0赞 19
  • webpack 从入门到工程实践
    GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要...
    萧玄辞阅读 12,669评论 7赞 110
  • 任务19-引用与深浅拷贝
    1、引用类型有哪些？非引用类型有哪些 基本类型值（数值、布尔值、null和undefined）：指的是保存在栈内存...
    大胡子歌歌阅读 418评论 0赞 0
  • 第三方推送
    第三方推送实现原理：http://zhang.hu/mobile-push/ 第三方推送未来无法生存：http:/...
    crescent_star阅读 619评论 0赞 51
  • 2017.9.9日志
    10:00观察:早上起来，看了会儿书，发现自己的专注度只有二十分钟。给高静电话，她有句话我听进去了‘给别人没有价值...
    徐丽红阅读 83评论 0赞 0