entry的用法，目前已經都遇到過了，一共三種。
entry: './src/js/index.js'單入口
它會打包形成乙個chunk。 輸出乙個bundle檔案。
此時chunk的名稱預設是 main 。
（就是假如在output裡，沒有指定名字：filename: '[name].js'，
那麼預設名是main）。
entry: ['./src/index.js', './src/count.js']多入口
所有入口檔案最終只會形成乙個chunk，輸出出去只有乙個bundle檔案。
這種用法之前在hmr中用到過，當時是通過修改entry入口，將html檔案引入。
目前，這種用法只用在hmr功能中，讓html熱更新生效。
多入口。這種用法之前在code split，**分割中提到，就是用來有幾個入口檔案就形成幾個chunk，輸出幾個bundle檔案。 此時chunk的名稱是 key 。
entry:
entry:
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, plugins:
[new
htmlwebpackplugin()
],mode:
'development'
};
publicpath: '/'，一般用於生產環境，它會在路徑前加乙個字首，比如，路徑會從』imgs/a.jpg』 變成 『/imgs/a.jpg』 ，這兩種路徑還是有區別的，加斜槓會以當前伺服器位址為補充，去伺服器根目錄下尋找這麼乙個目錄，不加斜槓是在當前路徑下找。
效果：
library一般用來暴露一些庫，通常結合dll，將某些庫單獨打包，然後引入使用，平常不用。
chunkfilename: 'js/[name]_chunk.js'可以修改非入口chunk的名稱
index.js
import count from
'./count'
;console.
log(
'index.js檔案載入了~');
import
('./add').
then((
)=>);
console.
log(
count(3
,2))
;
function
add(x, y)
export
default add;
function
count
(x, y)
export
default count;
下面只寫比較常用的，也是之前用的比較多的，但不是沒有其他的用法，有需要檢視官方文件就好了。
module:,}
,]}
這個resolve不是之前取路徑那個resolve，這個之前沒用過，resolve是用來解析模組的規則。
webpack.config.js
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
module.exports =
, module:]}
, plugins:
[new
htmlwebpackplugin()
],mode:
'development'
,// 解析模組的規則
resolve:
,// 配置省略檔案路徑的字尾名
extensions:
['.js'
,'.json'
,'.jsx'
,'.css'],
// 告訴 webpack 解析模組是去找哪個目錄
modules:
[resolve
(__dirname,
'../../node_modules'),
'node_modules']}
};
通過設定alias，設定了$css，即存放css的路徑，那麼在js中引入的時候，就可以如下面的index.js的方式引入（也就避免了，如果存放css的路徑層級比較多，在js中比較累贅的問題，當然缺點就是只看js檔案，你不知道這個css樣式是從**引入的）。
同時通過設定extensions，可以讓我們引入時，省略檔案路徑的字尾名。當要引入時，它會去指定的目錄下，先尋找js字尾有沒有這個檔案，然後是json字尾、jsx字尾、css字尾，以此類推。找不到就會報錯。通常情況下，這裡不省略css字尾名，畢竟它是從前向後找，而且有可能會出現命名相同的情況，可能會出現意想不到的問題，這裡只是做個示範。如下面的index.js。
index.js
import
'$css/index'
;
html,body
注意：devserver只用於開發環境。
devserver:
,// 啟動gzip壓縮
compress:
true
,// 埠號
port:
5000
,// 網域名稱
host:
'localhost'
,// 自動開啟瀏覽器
open:
true
,// 開啟hmr功能
hot:
true
,// 不要顯示啟動伺服器日誌資訊
clientloglevel:
'none'
,// 除了一些基本啟動資訊以外，其他內容都不要顯示
quiet:
true
,// 如果出錯了，不要全屏提示~
overlay:
false
,// 伺服器** --> 解決開發環境跨域問題
proxy:}}
}
optimization之前在**分割中用過。
注意：只用於生產環境。
像當初**分割一樣，這裡依然給檔案名字加了雜湊值，依然會出現以前提到過的問題，就是當我們修改a檔案時，a的雜湊值就會發生改變，而index因為引入a檔案，所以它的雜湊值也發生了變化。現在我們不想讓index的雜湊值也發生改變，所以使用到了runtimechunk。因為設定了雜湊值，所以相當於index檔案是根據雜湊值引入其他檔案的，現在runtimechunk就會將當前模組的記錄其他模組的hash單獨打包為乙個檔案，這樣一來a檔案改變，只會改變runtimechunk檔案中的雜湊值。
const
=require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
const terserwebpackplugin =
require
('terser-webpack-plugin'
)module.exports =
, module:]}
, plugins:
[new
htmlwebpackplugin()
],mode:
'production'
, resolve:
, extensions:
['.js'
,'.json'
,'.jsx'
,'.css'],
modules:
[resolve
(__dirname,
'../../node_modules'),
'node_modules']}
, optimization:
, default:
}*/},
// 將當前模組的記錄其他模組的hash單獨打包為乙個檔案 runtime
// 解決：修改a檔案導致b檔案的contenthash變化
runtimechunk:
` }
, minimizer:
[// 配置生產環境的壓縮方案：js和css
newterserwebpackplugin()
]}};
export
function
add(x, y)
import
(/* webpackchunkname: 'a' */
'./a.js').
then((
)=>
);
webpack配置詳解
filename 檔名稱目錄 path 輸出檔案目錄 publicpath 所有資源引用公共路徑字首 chunkfilename 非入口chunk的名稱 library 整個庫向外暴露的名稱 librarytarget 變數新增到哪個上module 多個 exclued node modules 排...
webpack各配置詳解
例如 devtool cheap module eval source map 當專案中報錯可以準確的定位到哪個檔案報錯 對比項構建速度 重新構建速度 提示定位 cheap module eval source map 原始源 eval webpack生成後的 可根據場景使用這兩個值除錯 webpa...
webpack配置詳解 一 entry詳解
單入口 打包形成乙個chunk。輸出乙個bundle檔案。此時chunk的名稱預設是 main多入口 所有入口檔案最終只會形成乙個chunk,輸出出去只有乙個bundle檔案。只有在hmr功能中讓html熱更新生效 多入口 有幾個入口檔案就形成幾個chunk，輸出幾個bundle檔案 此時chunk...