extract-text-webpack-plugin
用途：提取单独css文件
不使用extract-text-webpack-plugin插件时的写法：
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
这时head里会插入style标签，加入样式:
dist目录无单独css文件：
使用extract-text-webpack-plugin的写法：
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader','css-loader')
},
这时可以看到dist目录下生成了单独的index.css文件。通过在html中link标签去引用，即实现了css与js的分离。
看下webpack打包生成的js文件：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
//关键：这里为什么要用call?
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
/*
* @Author: yqy
* @Date: 2016-12-05 18:33:36
* @Last Modified by: yuqy
* @Last Modified time: 2016-12-08 19:04:52
*/
'use strict';
// require('./index.scss');
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.index = undefined;
__webpack_require__(5);
var index = {
init: function init() {
console.log('index');
}
};exports.index = index;
// require('./index.css');
/***/ },
/***/ 5:
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }
/******/ });
//# sourceMappingURL=index.js.map
可以看到：webpack整个结构是一个立即执行函数：
(function(){
})({0:funciton(){}, 1: function(){}})
webpack把每个模块整个都分配一个id，放在一个function里面，这个function通常会有2-3个参数，分别是：module, exports, webpack_require，第三个参数webpack_require根据文件里是否引入其他模块而决定有无这个参数，这些function组合成一个大的对象，或者一个大的函数数组扔给立即执行函数作为参数进去立即执行。
webpack_require这个函数的作用是返回module.exports上的对象。
return {
exports: {导出的整个对象},
id: 0,
loaded: true
}
commonsChunckPlugin
webpack本身内置了一些插件，还可以通过npm 安装第三方插件。commonsChunckPlugin就是webpack内置的一个插件。
有关此插件options设置请参考：https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
大致的参数有：
name/names: 传递数组的话会多次触发
filename:
miniChunks:
chunks:
children:
async:
miniSize:
关于miniChunks:
取值范围：>=2 <=max(chunk),
设置为 Infinity时，文档里说道：
just creates the commons chunk, but moves no modules into it.
我的理解是设置Infinity以后，会去读取common对应的数组，只打包这些内容，不会去检查entry所有文件之间的公共模块了。
为什么要用commonsChunckPlugin这个插件？
官方用途第一条解释的好：
Generate an extra chunk, which contains common modules shared between entry points.
下面是我的理解：
假设你有a页面index.js，b页面list.js，两个页面都需要用到jquery. 于是你分别在a,b页面require('jquery')。 这时你打包完成的js中，会发现dist/index.js、dist/list.js中都打包了一份jquery。这样你的整个项目的体积（zip）就会非常大了，因为每个页面的入口文件里面都有一份重复的jquery。这时commonschunkPlugin就需要引入进来了。同理CSS，也可以抽取公用的模块。
//这是入口文件，两个js都require('jquery')
var entry_map = {
'index': './public/index/index.js',
'list': './public/list/list.js'
}
new webpack.optimize.CommonsChunkPlugin({
name: 'commons',
filename: 'commons.js'
})
使用了插件后立刻发现dist目录下生成了commons.js文件。
commons.js里会定义一个webpackJsonp函数。这是dist/index.js也发生了变化。整个js会用webpackJsonp包裹起来
commonsChunkPlugin 用法
var entry_map = {
'index': './public/index/index.js',
'list': './public/list/list.js',
'common': ['jquery', 'underscore', '']
}
providePlugin
用途：想在所有模块中不用require就引用某个模块
这也个是webpack内置插件，我们常用的react, jquery, underscore等常常会配置在这里：
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'underscore',
smallnote: 'smallnote',
React: 'react',
ReactDOM: 'react-dom'
}),
更多插件使用持续更新中~
References
http://www.jianshu.com/p/e52550354142
http://webpackdoc.com/loader.html
https://webpack.toobug.net/zh-cn/
https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
