Translations: 简体中文

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

[email protected] supports webpack v3.

[email protected] 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

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.

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

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/

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

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.

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=https://registry.npm.taobao.org
  npm install node-sass

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

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

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

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

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

• 3.1.x Output Using [chunkhash]

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

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

gulp与webpack的区别

前端开发利器 webpack

webpack 与RequireJS、browserify

webpack 从入门到工程实践

MIT License