webpack 插件使用总结

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/doc...
大致的参数有：
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/e525...
http://webpackdoc.com/loader....
https://webpack.toobug.net/zh...
https://webpack.github.io/doc...