{"id":18924800,"url":"https://github.com/sanchez3/generator-h5package","last_synced_at":"2025-04-15T12:32:50.104Z","repository":{"id":57247378,"uuid":"102594511","full_name":"Sanchez3/generator-h5package","owner":"Sanchez3","description":"A Yeoman generator to generate html5 projects base on webpack","archived":false,"fork":false,"pushed_at":"2019-12-31T10:30:21.000Z","size":169,"stargazers_count":19,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T11:42:32.903Z","etag":null,"topics":["es6","html5","javascript","webpack","wepack4","yeoman-generator"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/generator-h5package","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sanchez3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-06T10:15:57.000Z","updated_at":"2019-12-31T10:30:23.000Z","dependencies_parsed_at":"2022-08-24T16:50:47.747Z","dependency_job_id":null,"html_url":"https://github.com/Sanchez3/generator-h5package","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanchez3%2Fgenerator-h5package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanchez3%2Fgenerator-h5package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanchez3%2Fgenerator-h5package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sanchez3%2Fgenerator-h5package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sanchez3","download_url":"https://codeload.github.com/Sanchez3/generator-h5package/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249072511,"owners_count":21208201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","html5","javascript","webpack","wepack4","yeoman-generator"],"created_at":"2024-11-08T11:08:12.117Z","updated_at":"2025-04-15T12:32:49.860Z","avatar_url":"https://github.com/Sanchez3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# generator-h5package\n\n\u003cdiv align=\"left\"\u003e\n    \u003cdiv\u003e\n        \u003ca href=\"https://www.npmjs.com/package/generator-h5package\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/generator-h5package.svg\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://travis-ci.org/Sanchez3/generator-h5package\"\u003e\u003cimg alt=\"Travis CI Build Status\" src=\"https://travis-ci.org/Sanchez3/generator-h5package.svg?branch=master\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://david-dm.org/Sanchez3/generator-h5package\"\u003e\u003cimg alt=\"dependencies status\" src=\"https://david-dm.org/Sanchez3/generator-h5package/status.svg\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://david-dm.org/Sanchez3/generator-h5package?type=dev\"\u003e\u003cimg alt=\"devDependencies status\" src=\"https://david-dm.org/Sanchez3/generator-h5package/dev-status.svg\"/\u003e\u003c/a\u003e\n        \u003ca href=\"https://codecov.io/gh/Sanchez3/generator-h5package\"\u003e\u003cimg src=\"https://codecov.io/gh/Sanchez3/generator-h5package/branch/master/graph/badge.svg\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/generator-h5package\"\u003e\u003cimg alt=\"Downloads\" src=\"https://img.shields.io/npm/dm/generator-h5package.svg\"\u003e\u003c/a\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n**Translations: [简体中文](https://github.com/Sanchez3/generator-h5package/blob/master/README.zh-CN.md)**\n\n\u003e Note: `webpack 4.0` Release. Convention over Configuration!!! \n\u003e\n\u003e  [`generator-h5package@3.x.x`](https://github.com/Sanchez3/generator-h5package/tree/for-webpack3) supports webpack v3.\n\u003e\n\u003e  [`generator-h5package@4.x.x`](https://github.com/Sanchez3/generator-h5package/) supports webpack v4.\n\n`generator-h5package` is a [Yeoman](http://yeoman.io/) plugin that uses `Webpack+ Native Js` to make starting up Web projects simple, quick and easy, the same as [`generator-phaser-h5`](https://github.com/Sanchez3/generator-phaser-h5)\n\n## WHY\n\n[gulp](https://gulpjs.com/) is a toolkit for automating painful or time-consuming tasks in your development workflow, including watch, uglify Js, optimize Css, etc.\n\n[webpack](https://webpack.js.org/) 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*.\n\nIn [browserify](https://github.com/substack/node-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.\n\n\n\n## HOW \n\n### Install\n\n***\n\n\n\n\u003e Note: Install [Node.js](https://nodejs.org/en/) First\n\n- **Get  [Yeoman](http://yeoman.io/) and `generator-h5package` via [npm](https://www.npmjs.com/).**\n\n  ```sh\n  npm install --global yo                    # Install Yeoman if you don't have it yet.\n  npm install --global generator-h5package   # Install generator-h5package\n  ```\n\n\n\n\n### Usage\n\n***\n\n\n\n1. **Create a directory to keep your project contents and go into it.**\n\n   ```sh\n   mkdir myproject\n   cd myproject\n   ```\n\n2. **Create your new project.**\n\n   ```sh\n   yo h5package\n   ```\n\n3. **Launch it!**\n\n   ```sh\n   npm run serve    # Launches the server and opens the page for live development.\n   npm run build    # Prepare the h5 release for distribution.\n   ```\n\nThe release in  `dist/`\n\n\n\n### Directory Structure\n\n***\n\n**In development, run `npm run start`:**\n\n```sh\n    .\n    ├── dist\n    ├── src\n    │   ├── index.html\n    │   └── assets\n    │       ├── img\n    │       ├── media         # video audio resources\n    │       ├── css\n    │       │   ├── css.css\n    │       │   └── sass.scss\n    │       └── js\n    │           ├── entities  \n    │           └── main.js\n    │   \n    ├── node_modules\n    ├── LICENSE\n    ├── README.md\n    ├── package.json\n    ├── webpack.common.js      # \"common\" configuration\n    ├── webpack.dev.js         # \"development\"\n    └── webpack.prod.js        # \"production\"\n```\n\n**In production, run `npm run build`:**\n\n```sh\n   dist\n    ├── assets\n    │   ├── img\n    │   ├── fonts\n    │   ├── media\n    │   ├── css\n    │   │   └── main.[chunkhash].min.css\n    │   └── js\n    │       └── main.[chunkhash].min.js\n    ├── favicon.ico\n    └── index.html\n```\n\n\n\n### Plugins\n\n***\n\n[npm](https://www.npmjs.com/) manages plugins.\n\n`devDependencies` are for the development-related scripts, e.g. unit testing, packaging scripts, documentation generation, etc.\n\n`dependencies` are required for production use, and assumed required for dev as well.\n\n#### devDependencies:\n\n*Note: npm install \u003cpackages\u003e --save-dev*\n\n- webpack-plugins\n\n  - [sass-loader](https://www.npmjs.com/package/sass-loader)  loads a SASS/SCSS file and compiles it to CSS.\n  - [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) extracts CSS into separate files.\n  - [optimize-css-assets-webpack-plugin](https://www.npmjs.com/package/optimize-css-assets-webpack-plugin) optimize \\ minimize CSS assets.\n  - [uglifyjs-webpack-plugin](https://webpack.js.org/plugins/uglifyjs-webpack-plugin/) uses [UglifyJS v3](https://github.com/mishoo/UglifyJS2/tree/harmony)[(`uglify-es`)](https://npmjs.com/package/uglify-es) to minify your JavaScript. \n  - [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) simplifies creation of HTML files to serve your webpack bundles.\n  - [clean-webpack-plugin](https://www.npmjs.com/package/clean-webpack-plugin), [copy-webpack-plugin](https://www.npmjs.com/package/copy-webpack-plugin), [HashedModuleIdsPlugin](https://webpack.js.org/plugins/hashed-module-ids-plugin/), ~~[commons-chunk-plugin](https://webpack.js.org/plugins/commons-chunk-plugin)~~, etc.\n\n- [Babel](https://babeljs.io/) for the latest version of JavaScript through syntax transformers\n\n- [Node-sass](https://www.npmjs.com/package/node-sass) provides binding for Node.js to [LibSass](https://github.com/sass/libsass)\n  \u003e Note:Install from mirror in China\n  \u003e\n  \u003e ```Sh\n  \u003e npm install -g mirror-config-china --registry=http://registry.npm.taobao.org\n  \u003e npm install node-sass\n  \u003e ```\n\n\n#### dependencies:\n\n*Note: npm install \u003cpackages\u003e*\n\n- [howler.js](https://howlerjs.com/) for audio\n- [Gsap](https://greensock.com/gsap) for javascript animation\n- [animate.css](https://daneden.github.io/animate.css/) for CSS animation style\n- [ajax](https://github.com/fdaciuk/ajax)  for ajax\n- ~~jQuery~~ [You-Dont-Need-jQuery](https://github.com/nefe/You-Dont-Need-jQuery) \n\n#### others:\n\n*Note: Read Documentation For a Getting started guide, Usage , API docs, etc. check out or docs!*\n\n- [slick](http://kenwheeler.github.io/slick/) or [swiper](http://idangero.us/swiper/) for slider\n- [Stats](https://github.com/mrdoob/stats.js) for JavaScript Performance Monitor\n\n**Use the following ways Sometime:**\n\n- Local In `webpack.common.js` Split your code into `vendor.js` and `main.js`:\n\n  - remove  `CommonsChunkPlugin`, add  `optimization.splitChunks`  and  `optimization.runtimeChunk`\n\n- Use `require(file)` or `import \"module-name\"` in `main.js`\n\n- Cdn [jsDelivr](http://www.jsdelivr.com/), [cdnjs](https://cdnjs.com/), [bootcdn](http://www.bootcdn.cn/) \n\n\n\n### Production\n\n***\n\n**webpack.common.js** (Don't repeat yourself - DRY)\n\n\"common\" configuration\n\n-  `entry`\n-  `ouput`\n-  `module(babel-loader, css-loader, sass-loader, MiniCssExtractPlugin.loader, url-loader, postcss-loader)`\n\n**webpack.dev.js** (development)\n\n\"development\" configuration\n\n-  `devtool:eval`  [more options](https://webpack.js.org/configuration/devtool/#development)\n-  `devServer`\n\n**webpack.prod.js** (production)\n\n\"production\" configuration\n\n-  `optimization.minimizer(OptimizeCssAssetsPlugin, UglifyJsPlugin, etc.)` \n-  `devtool:source-map` Omit the  `devtool` option  [more options](https://webpack.js.org/configuration/devtool/#production)\n\n\n## WHAT\n\n### Versions\n\n#### 1.x.x Inital Publish \n\n- **1.2.x Add `uglifyjs-webpack-plugin`**\n- **1.3.x Add `CommonsChunkPlugin`**\n- **1.4.x Add `url-loader`**\n\n#### 2.x.x Separate webpack configurations for each environment. \n\n- **2.0.x Add `webpack-merge`**\n- **2.1.x Add Doc Translations**\n- **2.2.x Reset `devtool`**\n\n#### 3.x.x Refactor Generator , Fix tests\n\n- **3.1.x Output Using [chunkhash]**\n\n#### 4.x.x Refactor Generator for `webpack 4`\n\n- **4.0.x For `webpack 4`**\n- **4.1.x Add `postcss-loader`** for `autoprefixer`\n\n\n### Reference\n\n[gulp \u0026 webpack整合，鱼与熊掌我都要！](http://www.jianshu.com/p/9724c47b406c)\n\n[gulp与webpack的区别](http://www.cnblogs.com/lovesong/p/6413546.html)\n\n[前端开发利器 webpack](https://github.com/BuptStEve/blog/issues/4)\n\n[webpack 与RequireJS、browserify](https://www.amazon.cn/dp/B01MF8VAAR/ref=cm_sw_r_we_dp_0.3TzbBSB0JB1?original=1)\n\n[webpack 从入门到工程实践](http://gitbook.cn/m/mazi/article/5992553a6a71a268a9128d7b?readArticle=yes)\n\n\n\n### License\n\n[MIT License](https://github.com/Sanchez3/generator-h5package/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanchez3%2Fgenerator-h5package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanchez3%2Fgenerator-h5package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanchez3%2Fgenerator-h5package/lists"}