hey-cli

Webpack scaffolding, hot-dev-server, build.
Do not need to understand webpack, only need to know how to configure it to use, get rid of cumbersome duplication of webpack configuration.

中文文档

此处有中文文档

Advantage

Global installation, all development projects are supported, do not need to install and configure each project webpack.
Support ES6
Support Hot Module Replacement
Support Http Proxy
Default support vue2.0, support react
Support the global less parameter definition
Build UMD mode code
Only need to configure hey.conf.js configuration file

Installation

npm install -g hey-cli

# new version npm
sudo npm install -g hey-cli --unsafe-perm=true --allow-root

Configuration

Add the hey.conf.js configuration file in the project root directory.

module.exports = {
  "port": 9002, //Port
  "dist": 'dist', //the root of the build file
  "clean": true, //clean dist folder before build
  "timestamp": false, //the static folder generated by build with the static[timestamp] named folder
  "react": true, //support react project
  "openBrowser": true, // open browser auto
  "stat": true, // Whether to generate stat.json
  "webpack": { //webpack related configuration
    "console": false, //package compression whether to retain the console, the default is false
    "publicPath": "/", //public path
    "compress": true / false, // default value depends on build or dev, or you can set compress js when build.
    "output": {
      // Output what documents, mainly html,
      // Default setting will load the same js file as the html file name for the entrance. 
      // Support for defining common packages.
      "./*.html": {
        // Load js file by default, and html automatically references. 
        //If not configured, the same js file as the html file name is automatically
        "entry":"./src/index.js"
      }
    },

    //define resolve, https://webpack.js.org/configuration/resolve/
    "alias": {
      components: './src/components/',
      // You can use import index from 'components/index'  => src/components/index
    },

    //define global, https://webpack.js.org/plugins/provide-plugin
    "global": {
      "Vue": "vue",
      "$": "jquery",
      "log": "./js/common/log",
      // use export default
      Utils: [path.resolve(__dirname, 'src/js/common/utils'), 'default'],
    },

    //define proxy, https://webpack.js.org/configuration/dev-server/#devserver-proxy
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://yoda:9000"
        }
      },
      historyApiFallback: true
    },
    //define externals, https://webpack.js.org/configuration/externals/
    "externals":{

    },

    //Define the global less parameter definition, you can use the globalVars parameter in any less
    globalVars: './static/css/var.less',
  },

  // The files that are not referenced are copied to the packaged folder when build
  "copy": [
    "./images/**/*",
    "./help/**/*",
    "./template/**/*"
  ]
};

Extended Configuration

You can expand and configure the following properties in the webpack configuration item in hey.conf.js:

plugins
module
node
externals
devServer

Specific use, please refer to webpack document.

Example

Load vue,vue-router

"hey": {
  "port": 9008,
  "timestamp": true,
  "dist": "gen",
  "webpack": {
    "publicPath": "/",
    "output": {
      "./*.html": {
        "entry":"./src/app"
      }
    },
    "global": {
      "Vue": "vue"
    },
    "devServer": {
      "historyApiFallback":true
    }
  }
}

External loading vue,vue-router

"hey": {
  "port": 9008,
  "timestamp": true,
  "dist": "gen",
  "webpack": {
    "publicPath": "/",
    "output": {
      "./*.html": {
        "entry":"src/app"
      }
    },
    "global": {
      "Vue": "vue"
    },
    "devServer": {
      "historyApiFallback":true
    },
    "externals": {
      "Vue": "window.Vue",
      "VueRouter": "window.VueRouter"
    }
  }
}

Common code to build UMD mode

Mainly used to build some of the common code, simple configuration can be used.
Because it is a public package packaged into UMD mode, do not use the import mode.

module.exports = {
  dist: "build",
  webpack: {
    umd: {
      entry: "./src/index.js",
      library: "Validator",
      filename: 'validator.js', //build generation /build/validator.js
      libraryExport: 'default'
    },
    externals: {
      "manba": "manba"  //The dependent package will not be packaged into the source code
    }
  }
};

Deploy

Start webpack server

hey dev
hey build

# use custom config file build project
hey build -f index.esm.js

Analyze

You can generate analyze.

hey dev -r
# or
hey dev --report

# after hey build
hey report
# or
hey report -p port -f dist/stat.json

Parameter

//Identification is a development environment, or a production environment
const debug = process.env.NODE_ENV == 'development'; //production

Generate Project

Generate project using template.

hey init <project-name>
# hey init test

The current template

Simple: Base ES6 project
HeyUI: HeyUI project
HeyAdmin: HeyAdmin project
Vue: Base Vue project
React: Base React project
ElementUI: Element project
iViewUI: iViewUI project
ViewUI: ViewUI project

For specific projects, please refer to hey-cli-template。

heyui/hey-cli