README.zh-CN.md

基于Webpack的前端h5项目生成器

Translations: English

Note: Webpack 4 正式发布。约定优于配置！！！

generator-h5package@3.x.x 支持 webpack v3.

generator-h5package@4.x.x 支持 webpack v4.

前端项目工程化，使用Webpack+ Native Js 方式开发项目，之前写过一个基于gulp的前端h5项目生成器

WHY

​Gulp 只是个基于流的构建工具，优化前端工作流程，比如监控、压缩js、css、编译Sass等等。

​Webpack 则是个模块化管理的工具，能够完成Gulp所实现的绝大多数功能，也能通过webpack stream将Webpack整合到Gulp中。

Note: Gulp部分功能目前是强于Webpack，例如雪碧图。

不过Webpack在模块化方案更为优秀。随着项目庞大，项目会分工分块开发，所有script模块/脚本都需要引入到网页中，大量外部文件会使得网页承担多个HTTP请求带来的开销，影响HTML的响应速度。

​此外，Webpack与browserify，RequireJS相比，吸取了大量已有方案的优点与教训，也解决了很多前端开发过程中已存在的痛点，如代码的拆分与异步加载、对非 JavaScript 资源的支持等。当然另外两个打包工具也有可圈可点之处。

Note: RequireJS 的模块规范 AMD 并不兼容 JS 未来的模块化方案。

​目前webpack与越来越多的框架相容，也可以通过npm添加你所需要的前端框架以及插件 eg. React, Angular, Vue AND JQuery, gsap, animate.css, howler, etc.

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 start    # 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

---

开发时目录结构 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"

打包后目录结构 npm run build

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

插件 / Plugins

---

通过npm管理插件，devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

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 optimizes \ minimizes 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:

  • 删除CommonsChunkPlugin，改为用 optimization.splitChunks 和 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) ”通用“配置

• entry
• ouput
• module(babel-loader, css-loader, sass-loader, MiniCssExtractPlugin.loader, url-loader, postcss-loader)
• optimization(runtimeChunk, splitChunk)
• plugins(HashedModuleIdsPlugin, CleanWebpackPlugin, MiniCssExtractPlugin, HtmlWebpackPlugin)

webpack.dev.js (development)

”开发“配置

• devtool:eval more options
• devServer

webpack.prod.js (production)

”生产“配置

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

WHAT

版本 / Versions

1.x.x 正式发布

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

2.x.x 分离开发和生产环境

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

3.x.x 重构生成器，修改测试用例

• 3.1.x Output Using [chunkhash]

4.x.x 支持 webpack 4.0

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

参考

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

gulp与webpack的区别

前端开发利器 webpack

webpack 与RequireJS、browserify

webpack 从入门到工程实践

License

MIT License