【webpack核心】- 8、入口 和 出口

最終代碼：

var path = require("path")

module.exports = {
    mode: "production",
    entry: {
        main: "./src/index.js", //屬性名：chunk的名稱， 屬性值：入口模塊（啓動模塊）
        a: ["./src/a.js", "./src/index.js"] //啓動模塊有兩個
    },
    output: {
        path: path.resolve(__dirname, "target"), //必須配置一個絕對路徑，表示資源放置的文件夾，默認是dist
        filename: "[name].[chunkhash:5].js" //配置的合併的js文件的規則
    },
    devtool: "source-map"
}

1、node環境下的./ 和 _dirname

node環境下的./的含義，分2種情況：

1. 模塊化代碼中，比如require("./")，表示當前js文件所在的目錄
2. 在路徑處理中，"./"表示node運行的目錄

__dirname: 所有情況下，都表示當前運行的js文件所在的目錄，它是一個絕對路徑
   

2、node裏的path模塊

node內置模塊 - path: https://nodejs.org/dist/latest-v12.x/docs/api/path.html

var path = require("path") 導出了一個對象,該對象提供了大量路徑處理的函數
path.resolve()該函數可以把一些列的路徑/路徑片段組裝成絕對路徑

var path = require("path");
var result1 = path.resolve("./", "child", "abc", "123");

var result2 = path.resolve(__dirname, "src");
console.log(result1);
console.log(result2);

如上圖：
./表示node運行的目錄
__dirname表示當前運行的js文件所在的目錄

3、出口

這裏的出口是針對資源列表的文件名或路徑的配置
出口通過output進行配置,output 是一個對象,常用的配置是filename 和 path：

path – 修改打包的資源 存放的文件夾

• path – 路徑，必須配置一個絕對路徑，表示資源放置的文件夾，打包的資源放到哪個文件夾，默認是 絕對路徑的dist

output: {
    path: path.resolve(__dirname, "target"), //必須配置一個絕對路徑，表示資源放置的文件夾，默認是dist
},

path:"d:\\webpack\\xx\xx\\dist"這樣手寫的絕對路徑不好：
1，不同的操作系統斜槓的寫法不同；
2，工程移動的時候，要修改路徑，路徑寫死了修改麻煩
推薦使用：
因爲webpack.config.js是在node環境裏運行的，所以可以使用node的path模塊 path.resolvr(__dirname,"target")來產生一個絕對路徑，__dirname 是當前運行的js文件所在的絕對路徑– 和src同級的target目錄

filename – 修改打包文件的文件名

• filename:配置的是資源的文件名

1. 資源是chunk產出的，chunk是模塊合併的結果，資源列表中一定有一個是 合併模塊後的js代碼文件，還可能有對應的.map文件；filename配置的是合併模塊後的js代碼文件的文件名的規則；
2. 多個chunk 會產生多個資源列表， 但output只配置一個字符串–這個字符串是一種規則，可以是靜態配置，也可以是動態配置

靜態配置filename

output: {
	path: path.resolve(__dirname, "target"),//這樣打包文件會被打包到target文件夾裏，沒有寫但話打包到dist文件夾裏
    //filename配置的合併的js文件的規則
    filename: "bundle.js",  //靜態配置--會在target下生成bundle.js文件
    filename: "abc/efg/bundle.js",  //想把js放到target下abc下efg文件夾下
},

動態配置filename

filename:"[name].js",
filename:"[name]-123.js",   //搭配一些佔位符適用
filename:"[name]-[hash].js",   //hash: 總的資源hash，通常用於`解決緩存問題`
filename:"[name]-[chunkhash:5].js",   //hash:5  取hash值的前5位

• name：chunkname
• hash: 總的資源hash，通常用於解決緩存問題
• chunkhash: 使用chunkhash - 當一個js內容變了,只有對應當文件名改變
• id: 使用chunkid，不推薦–因爲開發環境是chunkname，生成環境是從0 開始當數字，開發 和 生產不一致，不推薦

4、入口

入口真正配置的是chunk

• 入口通過entry進行配置，其實配置到應該也是一個對象，裏面配置的是chunk {chunk的名稱:入口模塊}
entry:'./src/index.js' 會默認轉成entry:{main:"./src/index.js"}

多入口配置 + 出口動態配置

• 多個chunk就會有多個入口，如下，兩個chunk會根據相應的入口文件找到相應的模塊，各自合併打包出一個js
  
• 如上的寫法，會報錯：對應conflict--衝突：多個chunk生成的資源到一個相同到文件名
  
  **多個入口chunk ，就不能靜態配置出口文件名了，我們應該動態配置一個規則，可以適用多個chunk;**規則如下：在合適到位置加一個[動態數據]
  動態配置出口文件名：

filename:"[name].js",
filename:"[name]-123.js",   //搭配一些佔位符適用
filename:"[name]-[hash].js",   //hash: 總的資源hash，通常用於`解決緩存問題`
filename:"[name]-[hash:5].js",   //hash:5  取hash值的前5位

瀏覽器請求完文件後會緩衝起來，下次適用到時候就用緩衝，但當js文件改變後，我們希望重新下載文件–>所以我們希望文件內容改變後，文件名也改變——>這樣當瀏覽器緩衝裏找不到了，就會重新加載
關於hash：讓文件名根據文件內容做改變，適用hash–hash就是根據文件內容生成出來當
使用總hash的話，一個文件內容變了，所有文件的名字都會改變，因爲後面的hash變了，推薦適用chunkhash
chunkhash – 當一個js內容變了，只有這個js對應當chunkhash改變了，所以只有對應當文件名改變，瀏覽器就只用重新加載改變當文件了

• name：chunkname
• hash: 總的資源hash，通常用於解決緩存問題
• chunkhash: 使用chunkhash - 當一個js內容變了,只有對應當文件名改變
• id: 使用chunkid，不推薦–因爲開發環境是chunkname，生成環境是從0 開始當數字，開發 和 生產不一致，不推薦

入口：配置一個chunk下有多個入口模塊

入口配置：一個chunk下有多個入口模塊

entry: {
    main: "./src/index.js", //屬性名：chunk的名稱， 屬性值：入口模塊（啓動模塊）
    a: ["./src/a.js", "./src/index.js"] //啓動模塊有兩個
},

a: ["./src/a.js", "./src/index.js"] 這樣，一個chunk裏有兩個啓動模塊，比如兩個沒有互相引用當模塊，最後合併出來當資源還是隻有一個，打包出來當結果代碼裏，按照順序運行兩個入口模塊