摘要：因為是基于的一款工具，所以在學(xué)習(xí)過程中涉及到的知識也會進(jìn)行解釋進(jìn)行發(fā)散性拓展。最終返回給調(diào)用的是而不是。這里引用官網(wǎng)的一個例子請輸入代碼模塊代碼在這。在這個例子中，定義了一個函數(shù)。也就是說合并了多個文件的依賴模塊。

因為webpack是基于nodejs的一款工具，所以在學(xué)習(xí)過程中涉及到的nodejs知識也會進(jìn)行解釋進(jìn)行發(fā)散性拓展。
webpack中文文檔

 module.exports = {
         entry: "./path/to/my/entry/file.js"
    };

exports 變量是在模塊的文件級作用域內(nèi)可用的，且在模塊執(zhí)行之前賦值給 module.exports在nodejs中，提供了exports 和 require 兩個對象，其中 exports 是模塊公開的接口，require 用于從外部獲取一個模塊的接口，即所獲取模塊的 exports 對象。而在exports拋出的接口中，如果你希望你的模塊就想為一個特別的對象類型，請使用module.exports；如果希望模塊成為一個傳統(tǒng)的模塊實例，請使用exports.xx方法；module.exports才是真正的接口，exports只不過是它的一個輔助工具。最終返回給調(diào)用的是module.exports而不是exports。這里引用nodejs官網(wǎng)的一個例子

     function require(/* ... */) {
          const module = { exports: {} };
          ((module, exports) => {`請輸入代碼`
          // 模塊代碼在這。在這個例子中，定義了一個函數(shù)。
            function someFunc() {}
            exports = someFunc;//也就是說你多帶帶給exports賦值時候exports不屬于module了是一個多帶帶的變量
        // 此時，exports 不再是一個 module.exports 的快捷方式，
        // 且這個模塊依然導(dǎo)出一個空的默認(rèn)對象。
            module.exports = someFunc;//這里導(dǎo)出的函數(shù)是掛在module里的所以會被導(dǎo)入
        // 此時，該模塊導(dǎo)出 someFunc，而不是默認(rèn)對象。
      })(module, module.exports);
      return module.exports;//這里是這句話的解釋 （最終返回給調(diào)用的是module.exports而不是exports）
    }

entry入口起點,entry所配置的文件路徑所指向的文件為項目的入口文件也就是內(nèi)部依賴的開始會根據(jù)入口文件去逐層加載依賴。Chunk 和打包時入口文件配置有關(guān)如果 entry 是一個 string 或 array ，就只會生成一個 Chunk，這時 Chunk 的名稱是 main，如果 entry 是一個 object ，就可能會出現(xiàn)多個 Chunk，這時 Chunk 的名稱是 object 鍵值對里鍵的名稱。

entry接受三種類型值

1.單入口寫法 String 例：
    entry: "./app/to/my/entry/file.js"
    entry：{ main:""./app/to/my/entry/file.js""}
2.單入口數(shù)組寫法 Array例：
    entry：["./app/entry1", "./app/entry2"]
    在你想要多個依賴文件一起注入，并且將它們的依賴導(dǎo)向(graph)到一個“chunk”時
    ，傳入數(shù)組的方式就很有用。也就是說合并了多個文件的依賴模塊。
3.對象語法Object例：
    entry：{ a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"]}

分離第三方模塊和公共模塊

分離第三方模塊和webpack運(yùn)行文件等類似公共模塊是為了避免加載等問價過大等待時間長的優(yōu)化，當(dāng)你不同的入口文件都依賴了相同的第三方模塊這時候需要把他們抽離出來。這里主要應(yīng)用了entry的對象語法和CommonsChunkPlugin。實際應(yīng)用舉例：

1.分離業(yè)務(wù)模塊和公共模塊（webpack文件，第三方模塊，自定義公共模塊）

const path = require("path");
const webpack = require("webpack");
const packagejson = require("./package.json");
const config = {
entry: {
    first: "./src/first.js",//引入了common.j和vue.js
    second: "./src/second.js",//引入了common.j和vue.js
    vendor: Object.keys(packagejson.dependencies)//獲取生產(chǎn)環(huán)境依賴庫的
    //模塊名稱，返回一個數(shù)組，這里涉及的是單入口數(shù)組寫法將多個依賴合并到一個chunk中
    //在這里vue作為第三方庫會被合并
},
output: {
    path: path.resolve(__dirname,"./dist"),
    filename: "[name].js"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",//指定已經(jīng)存在的chunk這里指向的是vendor，
        公共部分模塊都會合并到這個chunk名對應(yīng)的文件，不指定默認(rèn)生成name為commons的chunk。
        filename: "[name].js"http://抽離出公共部分的文件名
    }),
]
}

module.exports = config;

2.詳細(xì)分離業(yè)務(wù)模塊 第三方依賴 公共模塊 webpack運(yùn)行文件

plugins: [//這一步把webpack運(yùn)行文件抽離出來
        new webpack.optimize.CommonsChunkPlugin({//先抽離所用的公共模塊
            name: "vendor",
            filename: "[name].js"
        }),
        new webpack.optimize.CommonsChunkPlugin({//再指定vendor從中抽離webpack運(yùn)行文件
            name: "runtime",
            filename: "[name].js",
            chunks: ["vendor"]
        }),
         new webpack.optimize.CommonsChunkPlugin({
        name: ["vendor","runtime"],
        filename: "[name].js",
        minChunks: Infinity//只有當(dāng)入口文件（entry chunks） >= 3 才生效，
        //用來在第三方庫中分離自定義的公共模塊
        }),
        new webpack.optimize.CommonsChunkPlugin({
        name: "common",
        filename: "[name].js",
        minChunks:2,//默認(rèn)為2，意思是模塊被多少個chunk引用才被抽離
        //由于common被 first 和second 引用 所以會被抽離
        chunks: ["first","second"]//從first.js和second.js中抽取commons chunk
        }),
    ]
    

--by JK 2019 06 11 學(xué)習(xí)筆記