Skip to content

Latest commit

 

History

History
275 lines (170 loc) · 9.36 KB

README.zh-CN.md

File metadata and controls

275 lines (170 loc) · 9.36 KB

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

npm version Travis CI Build Status dependencies status devDependencies status Downloads

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与browserifyRequireJS相比,吸取了大量已有方案的优点与教训,也解决了很多前端开发过程中已存在的痛点,如代码的拆分与异步加载、对非 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

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:

    • 删除CommonsChunkPlugin,改为用 optimization.splitChunksoptimization.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)

”开发“配置

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