hey-cli

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
• Vue: Base Vue project
• React: Base React project
• ElementUI: Element project
• iViewUI: iViewUI project

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