Skip to content

Sanchez3/generator-h5package

Repository files navigation

generator-h5package

npm version Travis CI Build Status dependencies status devDependencies status Downloads

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

dependencies:

Note: npm install

others:

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

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

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