Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sanchez3/generator-h5package
A Yeoman generator to generate html5 projects base on webpack
https://github.com/sanchez3/generator-h5package
es6 html5 javascript webpack wepack4 yeoman-generator
Last synced: 3 months ago
JSON representation
A Yeoman generator to generate html5 projects base on webpack
- Host: GitHub
- URL: https://github.com/sanchez3/generator-h5package
- Owner: Sanchez3
- License: mit
- Created: 2017-09-06T10:15:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-12-31T10:30:21.000Z (about 5 years ago)
- Last Synced: 2024-10-31T18:08:00.648Z (4 months ago)
- Topics: es6, html5, javascript, webpack, wepack4, yeoman-generator
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/generator-h5package
- Size: 165 KB
- Stars: 19
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# generator-h5package
**Translations: [简体中文](https://github.com/Sanchez3/generator-h5package/blob/master/README.zh-CN.md)**
> Note: `webpack 4.0` Release. Convention over Configuration!!!
>
> [`generator-h5package@3.x.x`](https://github.com/Sanchez3/generator-h5package/tree/for-webpack3) supports webpack v3.
>
> [`generator-h5package@4.x.x`](https://github.com/Sanchez3/generator-h5package/) supports webpack v4.`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)
## WHY
[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.
[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*.
In [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.
## HOW
### Install
***
> Note: Install [Node.js](https://nodejs.org/en/) First
- **Get [Yeoman](http://yeoman.io/) and `generator-h5package` via [npm](https://www.npmjs.com/).**
```sh
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.**
```sh
mkdir myproject
cd myproject
```2. **Create your new project.**
```sh
yo h5package
```3. **Launch it!**
```sh
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`:**
```sh
.
├── 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`:**
```sh
dist
├── assets
│ ├── img
│ ├── fonts
│ ├── media
│ ├── css
│ │ └── main.[chunkhash].min.css
│ └── js
│ └── main.[chunkhash].min.js
├── favicon.ico
└── index.html
```### Plugins
***
[npm](https://www.npmjs.com/) 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](https://www.npmjs.com/package/sass-loader) loads a SASS/SCSS file and compiles it to CSS.
- [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) extracts CSS into separate files.
- [optimize-css-assets-webpack-plugin](https://www.npmjs.com/package/optimize-css-assets-webpack-plugin) optimize \ minimize CSS assets.
- [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.
- [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) simplifies creation of HTML files to serve your webpack bundles.
- [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.- [Babel](https://babeljs.io/) for the latest version of JavaScript through syntax transformers
- [Node-sass](https://www.npmjs.com/package/node-sass) provides binding for Node.js to [LibSass](https://github.com/sass/libsass)
> Note:Install from mirror in China
>
> ```Sh
> npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
> npm install node-sass
> ```#### dependencies:
*Note: npm install *
- [howler.js](https://howlerjs.com/) for audio
- [Gsap](https://greensock.com/gsap) for javascript animation
- [animate.css](https://daneden.github.io/animate.css/) for CSS animation style
- [ajax](https://github.com/fdaciuk/ajax) for ajax
- ~~jQuery~~ [You-Dont-Need-jQuery](https://github.com/nefe/You-Dont-Need-jQuery)#### others:
*Note: Read Documentation For a Getting started guide, Usage , API docs, etc. check out or docs!*
- [slick](http://kenwheeler.github.io/slick/) or [swiper](http://idangero.us/swiper/) for slider
- [Stats](https://github.com/mrdoob/stats.js) 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](http://www.jsdelivr.com/), [cdnjs](https://cdnjs.com/), [bootcdn](http://www.bootcdn.cn/)
### 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](https://webpack.js.org/configuration/devtool/#development)
- `devServer`**webpack.prod.js** (production)
"production" configuration
- `optimization.minimizer(OptimizeCssAssetsPlugin, UglifyJsPlugin, etc.)`
- `devtool:source-map` Omit the `devtool` option [more options](https://webpack.js.org/configuration/devtool/#production)## 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整合,鱼与熊掌我都要!](http://www.jianshu.com/p/9724c47b406c)
[gulp与webpack的区别](http://www.cnblogs.com/lovesong/p/6413546.html)
[前端开发利器 webpack](https://github.com/BuptStEve/blog/issues/4)
[webpack 与RequireJS、browserify](https://www.amazon.cn/dp/B01MF8VAAR/ref=cm_sw_r_we_dp_0.3TzbBSB0JB1?original=1)
[webpack 从入门到工程实践](http://gitbook.cn/m/mazi/article/5992553a6a71a268a9128d7b?readArticle=yes)
### License
[MIT License](https://github.com/Sanchez3/generator-h5package/blob/master/LICENSE)