为了方便维护和交流，文档统一迁移到语雀: https://yuque.com/easy-team. 该文档不再更新维护

1. 安装

$ npm i easywebpack --save-dev

2. API

easywebpack 暴露了 WebpackBaseBuilder, WebpackClientBuilder, WebpackServerBuilder 三个对象.

image

可以通过继承扩展的方式实现前端框架的构建:

  • 继承 WebpackClientBuilder 创建前端浏览器渲染模式 Webpack 构建配置
  • 继承 WebpackServerBuilder 创建 Node 渲染(Server Side Render)模式 Webpack 构建配置

2.1 Webpack Class Builder

const EasyWebpack = require('easywebpack');
const WebpackBaseBuilder = EasyWebpack.WebpackBaseBuilder;
const WebpackClientBuilder = EasyWebpack.WebpackClientBuilder;
const WebpackServerBuilder = EasyWebpack.WebpackServerBuilder;

const EasyWebpack = require('easywebpack-vue');
const WebpackClientBuilder = EasyWebpack.WebpackClientBuilder;
const WebpackServerBuilder = EasyWebpack.WebpackServerBuilder;

const EasyWebpack = require('easywebpack-react');
const WebpackClientBuilder = EasyWebpack.WebpackClientBuilder;
const WebpackServerBuilder = EasyWebpack.WebpackServerBuilder;

const EasyWebpack = require('easywebpack-weex');
const WebpackWeexBuilder = EasyWebpack.WebpackWeexBuilder;
const WebpackWebBuilder = EasyWebpack.WebpackWebBuilder;

const EasyWebpack = require('easywebpack-html');
const WebpackClientBuilder = EasyWebpack.WebpackClientBuilder ;

2.2 Webpack 辅助对象 webpack, merge, Utils

const webpack = EasyWebpack.webpack;
const merge = EasyWebpack.merge;
const Utils = EasyWebpack.Utils;

2.3 Webpack 辅助构建 WebpackTool对象, build 方法 和 server 方法


// see `webpack-tool` npm plugin
const WebpackTool = EasyWebpack.WebpackTool;

// webpack build file to dist
const build = EasyWebpack.build;
build([clientConfig, serverConfig], (),  () => {
  console.log('wepback vue build finished');
});

// webpack building memory and start build reuslt ui navigation
const server = EasyWebpack.server;
server([clientConfig, serverConfig], (),  () => {
  console.log('wepback vue build finished');
});

3. 扩展实现

  • config 参数可以根据解决方案需求内置部分配置, 用户配置最终会与默认配置进行 merge 操作.
  • 具体扩展请见 API 文档. 下面扩展部分相同的代码可以抽离成基类,这里仅作为演示.

3.1 继承 WebpackClientBuilder 创建前端浏览器渲染模式 Webpack 构建配置

// ${root}/build/client.js
const EasyWebpack = require('easywebpack');
class WebpackClientBuilder extends EasyWebpack.WebpackClientBuilder {
  constructor(config) {
    super(config);
    // call below api custom client builder, this use vue example
    // 添加.vue 文件 extendsion
    this.setExtensions('.vue'); 
    // 添加框架node_modules 到 Webpack node_modules 查找路径
    this.setResolveLoader({ modules: [path.join(__dirname, '../node_modules')] }); 
    // 添加框架内置的 vue-loader 配置
    this.mergeLoader(require('../config/loader'));
    // 为 vue 添加别名
    this.setAlias('vue', 'vue/dist/vue.common.js', false);
  }
}
module.exports = WebpackClientBuilder;

获取 Webpack 原生配置: new WebpackClientBuilder(config).create()

3.2 继承 WebpackServerBuilder 创建 Node 渲染(Server Side Render)模式 Webpack 构建配置

该步骤非必需, 除非你要实现 Node Server Side Render 渲染

// ${root}/build/server.js
const EasyWebpack = require('easywebpack');
class WebpackServerBuilder extends EasyWebpack.WebpackServerBuilder {
  constructor(config) {
    super(config);
    // call below api custom server builder
    // 添加.vue 文件 extendsion
    this.setExtensions('.vue'); 
    // 添加框架node_modules 到 Webpack node_modules 查找路径
    this.setResolveLoader({ modules: [path.join(__dirname, '../node_modules')] }); 
    // 添加框架内置的 vue-loader 配置
    this.mergeLoader(require('../config/loader'));
    // 为 vue 添加别名
    this.setAlias('vue', 'vue/dist/vue.runtime.common.js', false);
  }
}
module.exports = WebpackServerBuilder;

获取 Webpack 原生配置: new WebpackServerBuilder(config).create()

4. 使用构建扩展方案

4.1 定义 WebpackBuilder config 参数

module.exports = {
  env: process.env.BUILD_ENV, // 打包模式
  entry:{
    //  src/page 目录下的 js 文件将作为 Webpack entry 入口
    include: [src/page/**.js] 
  }
}

4.2 编写构建入口执行文件

// ${root}/build/index.js
const EasyWebpack = require('easywebpack');
const clientConfig = require('./build/client');
const serverConfig = require('./build/server');

// Webpack 开发模式, 启动 Webpack dev server构建,
EasyWebpack.server([clientConfig, serverConfig]);


// Webpack构建编译文件到磁盘
EasyWebpack.build([clientConfig, serverConfig], () => {
  console.log('wepback build finished');
});

4.3 运行构建

  • package.json:
{
  "scripts": {
    "build:dev": "BUILD_ENV=dev node build",
    "build:prod": "BUILD_ENV=prod node build"
  }
}
  • bash run
npm run build:dev
npm run build:prod

5. 现有解决方案

在实现一个全新的解决方案时, 建议先把 easywebpack 文档熟悉一遍, 同时阅读已有解决方案实现方式