wefed

We are the front end engineer！

wefed是基于webpack实现的二次编译工具，基于webpack-chain做链式流。

它提供了如下基本功能：

1. 脚手架生产初始化项目（full、vue、hello）
2. webpack项目编译，集成插件化，可以配置大量custom plugin个性化
3. webpack-dev-server本地实时预览开发
4. 未来插件化支持更多框架、更多个性化编译参数集成
5. 环境配置化隔离，dev、test、gamma、idc

安装启动

安装Node

推荐安装最新的 LTS 版本Node，如果本地没有安装Node或安装了低版本的Node，可以按下面的指引安装最新版的Node：

Node安装完成后，在命令行执行 node -v 查看下对应的Node版本是否安装成功：

$ node -v
v8.11.2

安装wefed

Node安装成功后，执行如下npm命令安装wefed （Mac或Linux的非root用户需要在命令行前面加sudo，如：sudo npm install -g wefed）

npm install -g wefed

npm默认镜像是在国外，有时候安装速度很慢或者出现安装不了的情况，如果无法安装或者安装很慢，可以使用taobao的镜像安装：

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install -g wefed

或者直接指定镜像安装：
npm install wefed -g --registry=https://registry.npm.taobao.org

wefed安装完成后，执行命令 wefed help ，查看wefed的帮助信息：

$ wefed help

Usage: wefed <command> [options]

Commands:

    init                       生产模版文件
    dll                        dll资源编译
    server                     本地启动服务
    build                      输出编译文件
    help                       Display help information

Options:

    -e, --entry [entry]           指定编译入口, 如./src/pages/index/index.js (default: )
    -p, --page [page]             指定编译页面，pages结构下的文件名，如index
    -m, --mode [mode]             编译模式, 如local,test,prod (default: prod)
    -M, --mode [mode]             编译模式, 如local,test,prod (default: prod)
    -E, --env [env]               编译环境, 如dev,test,gamma,idc (default: dev)
    -P, --platform [platform]     编译终端, 如web,weex,mp (default: web)
    -d, --dll [dll]               是否开启使用dll预编译 (default: false)
    -l, --lighthouse [lighthouse] 是否在build时启用lighthouse (default: false)
    -v, --version                 版本
    -V, --version                 output the version number
    -h, --help                    output usage information

脚手架

wefed init [template] [projectName] [projectPath]

Note: 默认生产的项目都有wefed.config.js编译配置文件，里面可以自定义很多参数、插件

Note: init初始化项目，根目录下会创建一份.babelrc

本地server开发:

wefed server

本地编译文件输出:

wefed build

Note: -M 可以指定编译模式，默认为prod生产，将开启额外配置项

Note: -E 指定编译环境，默认dev，并且用优先使用wefed-config.js里的devConfig

Note: -P 指定编译终端，默认web

链式配置化

项目wefed.config.js配置文件中，可以定义相关配置

1. webpack -编译过程webpack-config参数设置
2. lifeCycle -编译过程生命周期指令，beginAction、compiler、endAction
3. preset -自定义一些共性插件，比如fix修补webpack参数，action发布指令，command集成其他命令
4. baseConfig-编译基础参数配置，path等

Note: wefed.config.js会有4个环境配置（devConfig、betaConfig、gammaConfig、idcConfig），结构与外层结构一样，指定环境会优先使用

let webpackConfig = util.findConfig();
let envConfig = Object.assign({}, webpackConfig[`${env}Config`]);
webpackConfig = merge(webpackConfig, envConfig);

webpack

webpack: {
    plugin: {
      "OpenBrowserPlugin": {
        plugin: OpenBrowserPlugin,
        args: [{
          url: `http://127.0.0.1:9394/local/html/index.html`
        }]
      }
    },
    devServer: {
      port: 9394,
      host: '127.0.0.1',
      contentBase: './dist',
      compress: true,
      historyApiFallback: true,
      disableHostCheck: true,
      headers: {
        'X-Custom-Foo': 'bar',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
      }
    },
  },

Note: webpack配置用都是webpack-chain，详细见Merging Config

lifeCycle

beginAction: [
    modulePath | function,
    options
]
compiler: [
    modulePath | function,
    options,
    callback
]
endAction: [
    modulePath | function,
    options
]

Note: module需要package.json加上依赖

presets

presets: [
    '@wefed/preset-optimization',
    "@wefed/preset-vue",
    '@wefed/preset-scene',
    '@wefed/preset-babel',
    '@wefed/preset-eslint',
]

Note: 个性化插件需要package.json加上依赖

baseConfig

baseConfig: {
    cCategory: false, // 关闭文件分类
    cExt: false, // 关闭文件扩展命名
    page: 'pages', // 多页分析路径 -> src/pages
    entry: 'main', // 多页入口分析 -> src/pages/index/main.js
    dist: path.resolve(`${process.cwd()}/dist/publish/web/`), // 编译路径
    publicPath: '/dist/publish/web' // 资源路径
}

License MIT