webpack

webpack has a rich plugin interface. Most of the features are internal plugins using this interface. This makes webpack very flexible.

webpack uses async I/O and has multiple caching levels. This makes webpack fast and incredibly fast on incremental compilation.

webpack supports pre-processing files via loaders. This allows you to bundle any static resource not only javascript. You can easily write your own loaders running in Node.js

webpack supports AMD and CommonJs module styles. It performs clever static analysis on the AST of your code. It even has an evaluation engine to evaluate simple expressions. This allows you to support most existing libraries.

webpack allows you to split your codebase into chunks. Chunks are loaded on demand. This reduces initial loading time.

webpack can do many optimizations to reduce the output size. It also cares about request caching by using hashes.

webpack supports SourceUrls and SourceMaps for simple debugging. It can watch your files and comes with a development middleware and a development server for automatic reloading.

webpack's main target is the web, but it also supports generating bundles for WebWorkers and Node.js

Goals:

  

1. Split the dependency tree into chunks loaded on demand
2. Keep initial loading time low
3. Every static asset should be able to be a module
4. Ability to integrate 3rd-party libraries as modules
5. Ability to customize nearly every part of the module bundler
6. Suited for big projects

How is webpack different?

    1:   Code Splitting

webpack has two types of dependencies in its dependency tree: sync and async. Async dependencies act as split points and form a new chunk. After the chunk tree is optimized, a file is emitted for each chunk.

Read more about Code Splitting.

    2:  Loaders

webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. By doing so, every resource forms a module.

Read more about Using loaders and Loaders.

    3: Clever parsing

webpack has a clever parser that can process nearly every 3rd party library. It even allows expressions in dependencies such require("./templates/" + name + ".jade") It handles the most common module styles: CommonJs and AMD.

Read more about expressions in dependencies, CommonJs and AMD.

   4: Plugin system

webpack features a rich plugin system. Most internal features are based on this plugin system. This allows you to customize[ 定制] webpack for your needs and distribute common plugins as open source.

Read more about Plugins.

 other info：

   loader:  url-loader

   1：git总结webpack使用方法

  2：阮一峰经典入门教程

  3：网上比较好的配置和解释教程 【一小时包教学会webpack的使用】

  4:   webpack1.x-->webpack2.x迁移指导 【二者没什么本质上的区别，只是2.x开始采用更多的es6的语法进行支持 】

  5:   官方文档

  6,   commonjs and amd   

 

  7:  webpack 2.x doc for chinese~

插件配置文件

  1：html-webpack-plugin  自动生成html的插件  插件官方 API

  2:  cofig info my github

  3:  比较好的配置案例