webpack-page-cli's Introduction

webpack-page-cli

Install

npm install webpack-page-cli -g 
# OR
yarn global add webpack-page-cli

Usage

webpack-page create <app-name>

Features

✅ es6 ➡️ es5

✅ Css preprocessor（scss less stylus）

✅ eslint

✅ stylelint

✅ multi pages support

✅ HRM

Related screenshots

Directory Structure

webpack-page-cli
|
├─build                     // webpack config folder
|   ├─build.js              // webpack build entry
|   ├─utils.js              // some utils about webpack config
|   ├─webpack.base.conf.js  // webpack.base.conf
|   ├─webpack.dev.conf.js   // webpack.dev.conf
|   ├─webpack.prod.conf.js  // webpack.prod.conf.js
|   └─webpack.svg           // webpack icon
|
|─config                    // some configuration about development and production
|   ├─dev.env.js                
|   ├─index.js             
|   └─prod.env.js           
|  
├─dist                      // Packaged file
|   └─static
|   |    ├─css             
|   |    ├─img              
|   |    └─js               
|   └─index.html           
|         
├─node_modules              // node_modules
├─src
|   ├─css                   // Page css folder
|   ├─img                   // Page img folder
|   |─font                  // Page font folder
|   |─js                    // Page js folder
|   └─index.html            // html files
|
|─static                    // Static resources, which are packaged directly into the /dist/static directory
|   └─.gitkeep
├─.balelrc                  // babel config
├─.eslintrc.js              // eslint config
├─.stylelintrc.json         // stylelint config   
├─.gitignore                // .gitignore
├─favicon.icon              // icon
├─package.json              // package.json
├─postcss.config.js         // postcss config
└─README.md

Multi Pages Support

webpack-page-cli supports multi-page configuration, and the configuration for multiple pages is as follows

Create a new pageA.html in the src root directory and create a new pageA.js in the src/js/ directory (the page name and the js name must be the same, because the corresponding html template will be generated according to the name of the js file when packaging)
Add the entry in the webpack.base.conf.js entry file entry, {pageA: './src/js/pageA.js'}
If there are more pages, and so on

Recommend Projects