generator-h5package

Translations: 简体中文

Note: webpack 4.0 Release. Convention over Configuration!!!

generator-h5package@3.x.x supports webpack v3.

generator-h5package@4.x.x supports webpack v4.

generator-h5package is a Yeoman plugin that uses Webpack+ Native Js to make starting up Web projects simple, quick and easy, the same as generator-phaser-h5

WHY

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, including watch, uglify Js, optimize Css, etc.

webpack is a static module bundler for modern JavaScript applications, do pretty much the same job as gulp. Also, use webpack stream to run webpack as a stream to conveniently integrate with gulp.

In browserify, you use gulp/grunt and a long list of transforms and plugins to get the job done. webpack offers enough power out of the box that you typically don’t need Grunt or Gulp at all.

HOW

Install

---

Note: Install Node.js First

• Get Yeoman and generator-h5package via npm.

  npm install --global yo                    # Install Yeoman if you don't have it yet. 
  npm install --global generator-h5package   # Install generator-h5package 

Usage

---

1. Create a directory to keep your project contents and go into it.

   mkdir myproject
   cd myproject

2. Create your new project.

   yo h5package

3. Launch it!

   npm run serve    # Launches the server and opens the page for live development. 
   npm run build    # Prepare the h5 release for distribution. 

The release in dist/

Directory Structure

---

In development, run npm run start:

    .
    ├── dist
    ├── src
    │   ├── index.html
    │   └── assets
    │       ├── img
    │       ├── media         # video audio resources 
    │       ├── css
    │       │   ├── css.css
    │       │   └── sass.scss
    │       └── js
    │           ├── entities  
    │           └── main.js
    │   
    ├── node_modules
    ├── LICENSE
    ├── README.md
    ├── package.json
    ├── webpack.common.js      # "common" configuration 
    ├── webpack.dev.js         # "development" 
    └── webpack.prod.js        # "production" 

In production, run npm run build:

   dist
    ├── assets
    │   ├── img
    │   ├── fonts
    │   ├── media
    │   ├── css
    │   │   └── main.[chunkhash].min.css
    │   └── js
    │       └── main.[chunkhash].min.js
    ├── favicon.ico
    └── index.html

Plugins

---

npm manages plugins.

devDependencies are for the development-related scripts, e.g. unit testing, packaging scripts, documentation generation, etc.

dependencies are required for production use, and assumed required for dev as well.

devDependencies:

Note: npm install --save-dev

• webpack-plugins

  • sass-loader loads a SASS/SCSS file and compiles it to CSS.
  • MiniCssExtractPlugin extracts CSS into separate files.
  • optimize-css-assets-webpack-plugin optimize \ minimize CSS assets.
  • uglifyjs-webpack-plugin uses UglifyJS v3(uglify-es) to minify your JavaScript.
  • html-webpack-plugin simplifies creation of HTML files to serve your webpack bundles.
  • clean-webpack-plugin, copy-webpack-plugin, HashedModuleIdsPlugin, commons-chunk-plugin, etc.

• Babel for the latest version of JavaScript through syntax transformers

• Node-sass provides binding for Node.js to LibSass

  Note:Install from mirror in China

  npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
  npm install node-sass

dependencies:

Note: npm install

• howler.js for audio
• Gsap for javascript animation
• animate.css for CSS animation style
• ajax for ajax
• jQuery You-Dont-Need-jQuery

others:

Note: Read Documentation For a Getting started guide, Usage , API docs, etc. check out or docs!

• slick or swiper for slider
• Stats for JavaScript Performance Monitor

Use the following ways Sometime:

• Local In webpack.common.js Split your code into vendor.js and main.js:

  • remove CommonsChunkPlugin, add optimization.splitChunks and optimization.runtimeChunk

• Use require(file) or import "module-name" in main.js

• Cdn jsDelivr, cdnjs, bootcdn

Production

---

webpack.common.js (Don't repeat yourself - DRY)

"common" configuration

• entry
• ouput
• module(babel-loader, css-loader, sass-loader, MiniCssExtractPlugin.loader, url-loader, postcss-loader)

webpack.dev.js (development)

"development" configuration

• devtool:eval more options
• devServer

webpack.prod.js (production)

"production" configuration

• optimization.minimizer(OptimizeCssAssetsPlugin, UglifyJsPlugin, etc.)
• devtool:source-map Omit the devtool option more options

WHAT

Versions

1.x.x Inital Publish

• 1.2.x Add uglifyjs-webpack-plugin
• 1.3.x Add CommonsChunkPlugin
• 1.4.x Add url-loader

2.x.x Separate webpack configurations for each environment.

• 2.0.x Add webpack-merge
• 2.1.x Add Doc Translations
• 2.2.x Reset devtool

3.x.x Refactor Generator , Fix tests

• 3.1.x Output Using [chunkhash]

4.x.x Refactor Generator for webpack 4

• 4.0.x For webpack 4
• 4.1.x Add postcss-loader for autoprefixer

Reference

gulp & webpack整合，鱼与熊掌我都要！

gulp与webpack的区别

前端开发利器 webpack

webpack 与RequireJS、browserify

webpack 从入门到工程实践

License

MIT License