技術標籤：webpack構建工具webpack

在webpack的配置檔案中，有兩個關於入口和出口的配置分別問entry和output。entry的值是代表生成chunk的入口地址，而output的值是把chunk輸出成檔案的路徑。

entry

//webpack.config.js

//寫法1：
module.exports = {
    entry:'./src/index.js'
}

//寫法2：
module.exports = {
    entry:{
        mychunk:'./src/index.js',     
    }
}

以上兩種寫法其實是等效的。寫法二中的mychunk可以自定義，這個鍵的名字代表的就是該鍵值對應路徑的chunk的命名，在沒有配置output的時候，預設是使用該chunk名作為輸出的檔名。

output

//webpack.config.js

//寫法1：
module.exports = {
    output:{
        path:__dirname + '/dist/', 
        //儲存的路徑,__dirname為內建變數，表示當前資料夾下，也就是和webpack.config.js的同級目錄
        
        filename:'main.js'
        //靜態輸出的檔名    
    }
    
}

//寫法2：
module.exports = {
    output:{
        path:__dirname + '/dist/',  
        //直接輸出完整路徑
        filename:'[name].js'
        //動態輸出檔名，以chunk名命名
        //hash 和 chunkhash 可以取位數如： [hash:6].js   [chunkhash:8].js
    }
    
}
 

方法2中的動態檔名有四種佔位變數：

• name:對應chunk的名字
• id:對應chunk的id（不建議使用。因為在development模式的id是chunk的名字，production模式是數字）
• hash:chunk彙總後的hash值（可以用來解決瀏覽器快取問題，檔案有改動hash值就會變動，瀏覽器發現檔名不同就會重新請求，不會被快取影響）
• chunkhash:對應的chunk的hash值