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中l(wèi)ink標簽去引用杯聚，即實現(xiàn)了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
//關(guān)鍵：這里為什么要用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整個結(jié)構(gòu)是一個立即執(zhí)行函數(shù)：
(function(){
})({0:funciton(){}, 1: function(){}})
webpack把每個模塊整個都分配一個id舌仍，放在一個function里面拄养，這個function通常會有2-3個參數(shù)轿衔，分別是：module, exports, webpack_require腮鞍，第三個參數(shù)webpack_require根據(jù)文件里是否引入其他模塊而決定有無這個參數(shù)，這些function組合成一個大的對象道盏，或者一個大的函數(shù)數(shù)組扔給立即執(zhí)行函數(shù)作為參數(shù)進去立即執(zhí)行而柑。
webpack_require這個函數(shù)的作用是返回module.exports上的對象文捶。
return {
exports: {導出的整個對象},
id: 0,
loaded: true
}
commonsChunckPlugin
webpack本身內(nèi)置了一些插件，還可以通過npm 安裝第三方插件媒咳。commonsChunckPlugin就是webpack內(nèi)置的一個插件粹排。
有關(guān)此插件options設(shè)置請參考：https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
大致的參數(shù)有：
name/names: 傳遞數(shù)組的話會多次觸發(fā)
filename:
miniChunks:
chunks:
children:
async:
miniSize:
關(guān)于miniChunks:
取值范圍：>=2 <=max(chunk),
設(shè)置為 Infinity時，文檔里說道：
just creates the commons chunk, but moves no modules into it.
我的理解是設(shè)置Infinity以后涩澡，會去讀取common對應的數(shù)組顽耳，只打包這些內(nèi)容，不會去檢查entry所有文件之間的公共模塊了妙同。
為什么要用commonsChunckPlugin這個插件射富？
官方用途第一條解釋的好：
Generate an extra chunk, which contains common modules shared between entry points.
下面是我的理解：
假設(shè)你有a頁面index.js，b頁面list.js粥帚，兩個頁面都需要用到jquery. 于是你分別在a,b頁面require('jquery')胰耗。 這時你打包完成的js中，會發(fā)現(xiàn)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'
})
使用了插件后立刻發(fā)現(xiàn)dist目錄下生成了commons.js文件。
commons.js里會定義一個webpackJsonp函數(shù)速警。這是dist/index.js也發(fā)生了變化叹誉。整個js會用webpackJsonp包裹起來
commonsChunkPlugin 用法
var entry_map = {
'index': './public/index/index.js',
'list': './public/list/list.js',
'common': ['jquery', 'underscore', '']
}
providePlugin
用途：想在所有模塊中不用require就引用某個模塊
這也個是webpack內(nèi)置插件，我們常用的react, jquery, underscore等常常會配置在這里：
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'underscore',
smallnote: 'smallnote',
React: 'react',
ReactDOM: 'react-dom'
}),
更多插件使用持續(xù)更新中~
References
http://www.reibang.com/p/e52550354142
http://webpackdoc.com/loader.html
https://webpack.toobug.net/zh-cn/
https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
