Skip to content

Latest commit

 

History

History
274 lines (169 loc) · 9.2 KB

README.zh-CN.md

File metadata and controls

274 lines (169 loc) · 9.2 KB
Raw

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

npm version Travis CI Build Status dependencies status devDependencies status Downloads

Translations: English

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

generator-h5package v4.0.0 支持 webpack 4

generator-h5package < v4.0.0 支持 webpack 3

前端项目工程化，使用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
    │   ├── media
    │   ├── css
    │   │   └── main.[chunkhash].min.css
    │   └── js
    │       └── main.[chunkhash].min.js
    │
    └── 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.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)

”开发“配置

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