webpack基礎配置

webpack運行規則：

Webpack 會給每個模塊分配一個唯一的id並通過這個id索引和訪問模塊。在頁面啟動時，會先執行入口文件中的代碼，其它模塊會在運行 require 的時候再執行。

運行時主要的參數

webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包，默認讀取文件webpack.config.js
webpack --watch //監聽變動並自動打包
webpack -p //壓縮混淆腳本
webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
webpack --display-error-details 打印錯誤詳情。
還有一些看性能的參數：
webpack --colors 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟
webpack --profile 輸出性能數據，可以看到每一步的耗時
webpack --display-modules 默認情況下 node_modules 下的模塊會被隱藏，加上這個參數可以顯示這些被隱藏的模塊
webpack entry.js bundle.js 編譯 entry.js 並打包到 bundle.js

配置文件

整個配置文件就是一個大的json，這個json需要用module.exports導出，常用有如下配置

1. entry:{}
2. output:{}
3. module:{}
4. resolve:{}
5. plugins:[]

1. entry

值可以為String,[String],Object

    {
        entry1: "./page1",
        entry2: ["./page2", "./page3"]
    }

value為數組形式時，將加載數組中的所有模塊，但以最后一個模塊作為輸出

2. output

{
    path: './build', //決定文件在磁盤中的位置,最好是絕對路徑
    filename: 'bundle.js'// 每個文件自己唯一的名字
    //最后打包出來的文件位置: ./build/bundle.js
    publicPath: 'http://mycdn.com/', // 用來生成URL
    chunkFilename:'',//非入口塊的文件名
    sourceMapFilename:'',//SourceMaps的文件名,默認值是 `[file].map`
    library:'',//單獨打包自己寫的某個庫，值為引用時需要的模塊名
    libraryTarget:'',//規定庫輸出的格式，這兩個參數一般在生成工具的配置文件中，不在項目打包文件中
}

filename可用變量：[name],[hash],[chunkhash]
chunkFilename可用變量：[id],[name],[hash],[chunkhash]
sourceMapFilename可用變量：[file],[id],[hash]
libraryTarget可選值：'var'(default),'this','commentjs','commentjs2','amd','umd'

3. module

loaders:[]

{
    test: 需要匹配的文件類型，用正則, 
    loader: 需要使用的加載器,
    enclude:''/[],
    include:''/[],
    loader: 用!分割加載器,
    loaders: 一個加載器的數組
},

和loaders相似的兩個參數：module.preLoaders, module.postLoaders，區別只在於時機不同
loader和loaders

1. 加載器需要單獨下載，'-loader'可以省略不寫,這個命名規則和搜索優先級順序在 webpack 的 resolveLoader.moduleTemplates api 中定義。
   Default: ["-webpack-loader", "-web-loader", "-loader", ""]
2. 多個加載器處理同一類型文件用'!'連接
3. loader的配置信息的參數寫到'?'后面
4. loader添加方法：
   • 在 webpack 全局配置中進行綁定，寫在配置文件中
   • 引用模塊的時候添加，如：require("!style!css!./style.css")
   • 通過命令行的方式使用。比如webpack entry.js bundle.js --module-bind 'css=style!css'
     Loader 可以同步或異步執行。

noParse

值為正則或正則數組
內容為不需用loader解析的東西

4. plugins

包括系統插件和擴展插件

CommonsChunkPlugin

作用：用於提取多個入口文件的公共腳本部分

    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3",
        ap1: "./admin/page1",
        ap2: "./admin/page2"
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
    ]
     script--- required:
     page1.html: commons.js, p1.js
     page2.html: commons.js, p2.js
     page3.html: p3.js
     admin-page1.html: commons.js, admin-commons.js, ap1.js
     admin-page2.html: commons.js, admin-commons.js, ap2.js

5. externals

不希望webpack把這個庫打包進代碼,一般配合libraryTarget使用
值可以為json, 字符串, 函數, 正則, 數組

    externals: {
            "react": "React",
    }
    //對應於const React=require('react');

6.resolve

Webpack 的配置提供了 resolve 和 resolveLoader 參數來設置模塊解析的處理細節，resolve 用來配置應用層的模塊（要被打包的模塊）解析，resolveLoader 用來配置 loader 模塊的解析。

    {
        //查找module的話從這里開始查找
        root: 'E:/github/flux-example/src', //絕對路徑
        //自動擴展文件后綴名，意味着我們require模塊可以省略不寫后綴名,注意一下, 第一個是空字符串! 對應不需要后綴的情況.
        extensions: ['', '.js', '.json', '.scss'],
        //模塊別名定義，方便后續直接引用別名，無須多寫長長的地址,也可以省下不少搜索硬盤的時間。
        alias: {
            AppAction : 'js/actions/AppAction.js'
        }
        //后續直接require('AppAction') 即可
    }

高級使用：shimming

推薦參考：shimming:https://github.com/webpack/docs/wiki/shimming-modules

在 AMD/CMD 中，我們需要對不符合規范的模塊（比如一些直接返回全局變量的插件）進行 shim 處理，這時候我們需要使用 exports-loader 來幫忙：

{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}
之后在腳本中需要引用該模塊的時候，這么簡單地來使用就可以了：

require('./tool/swipe.js');
swipe();

使用 script.js 在腳本中來加載我們的模塊：

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});