generator-webpack-humble

Develop and build project with React suit or Vue suit quickly

Features

• Support React suit with react-css-modules and react-redux and redux-thunk and jest and eslint and prettier
• Support Vue suit with vuex and vue-route and jest and eslint and prettier
• Support webpack 4 with splitChunks and browserSync
• Postcss plugin SVG, VW, Aspect-Ratio out of box
• Support Pug, Stylus, ES6
• Support mermaid, a simple markdown-like script language for generating charts from text via javascript

Requirements

• yeoman

$ npm install -g yo

• yarn

https://yarnpkg.com/en/docs/install#windows-tab

Installation

$ npm install -g generator-webpack-humble  

Usage

$ yo webpack-humble

Npm commands list

$ npm run dev # Launches the server
$ npm run build # Built the files

Structure

Generated project has the following structure:

React suit structure

app
├── dist
│   └── index.html
└── src
    ├── css
    │   └── index.styl
    ├── img
    │   └── hope.jpg
    ├── index.pug
    ├── js
    │   ├── actions
    │   │   ├── actionTypes.js
    │   │   └── demoData.js
    │   ├── components
    │   │   ├── Containers
    │   │   │   └── index.js
    │   │   ├── Demo
    │   │   │   ├── demo.styl
    │   │   │   └── index.js
    │   │   ├── LoadPics
    │   │   │   └── index.js
    │   │   └── Mermaid
    │   │       └── index.js
    │   ├── config
    │   │   ├── axiosGlobalConfig.js
    │   │   └── polyfills.js
    │   ├── helpers
    │   │   ├── AddEruda.js
    │   │   ├── CheckENV.js
    │   │   ├── CheckEmpty.js
    │   │   ├── ConvertPicPath.js
    │   │   ├── EndLoading.js
    │   │   ├── GetImgSrcList.js
    │   │   ├── MobileDetect.js
    │   │   ├── PreloadImageList.js
    │   │   ├── SetAxios.js
    │   │   ├── SourceUrl.js
    │   │   └── SwitchDomain.js
    │   ├── index.tsx
    │   └── reducers
    │       ├── demoData.js
    │       └── index.js
    └── static
        ├── extends
        │   └── jweixin-1.0.0.js
        └── json
            └── config.json

Vue suit structure

app
└── src
    ├── css
    │   └── index.styl
    ├── img
    │   └── hope.jpg
    ├── index.pug
    ├── js
    │   ├── App.vue
    │   ├── components
    │   │   ├── AppComponent.vue
    │   │   └── Mermaid.vue
    │   ├── config
    │   │   ├── axiosGlobalConfig.js
    │   │   └── polyfills.js
    │   ├── helpers
    │   │   ├── AddEruda.js
    │   │   ├── CheckENV.js
    │   │   ├── CheckEmpty.js
    │   │   ├── ConvertPicPath.js
    │   │   ├── EndLoading.js
    │   │   ├── GetImgSrcList.js
    │   │   ├── MobileDetect.js
    │   │   ├── PreloadImageList.js
    │   │   ├── SetAxios.js
    │   │   ├── SourceUrl.js
    │   │   └── SwitchDomain.js
    │   ├── index.js
    │   ├── router
    │   │   └── index.js
    │   └── store
    │       ├── index.js
    │       ├── modules
    │       │   └── callMask.js
    │       └── mutation-types.js
    └── static
        ├── extends
        │   └── jweixin-1.0.0.js
        └── json
            └── config.json