entry-----入口 詳解4種情況
1辕坝、String --->entry:'./src/js/index.js'
單入口
打包形成一個(gè)chunk见咒,輸出一個(gè)bundle文件
此時(shí)chunk的默認(rèn)名稱是main
2芋酌、Array --->entry:['./src/js/index.js','./src/js/add.js']
多入口
所有的入口文件最終會(huì)形成一個(gè)chunk文件答憔,輸出出去只有一個(gè)bundle文件
只有一個(gè)用途:使用HMR功能html不能熱更新的解決辦法
---->['./src/js/index.js','./src/index.html'],
3攘已、Object
entry:{
index:'./src/js/index.js',
add:'./src/js/add.js'
},
多入口
有幾個(gè)入口文件就形成幾個(gè)chunk女蜈,輸出幾個(gè)bundle文件
此時(shí)chunk名稱就是key
4验烧、特殊用法(在應(yīng)用dll的時(shí)候使用)
entry:{
//形成一個(gè)chunk,輸出一個(gè)bundle
index:'./src/js/index.js',
//所有js形成一個(gè)chunk板驳,輸出一個(gè)bundle
add:['./src/js/add.js','./src/js/count.js'],
//react:['react','react-dom']
},
output 中filename 命名
output:{
filename:'js/out.js',
path:resolve(__dirname,'dist')
},
output:{
//當(dāng)為name時(shí)候,如果是入口為string碍拆,則為main.js
filename:'js/[name].js',
path:resolve(__dirname,'dist')
},
全面的output
output:{
//文件名稱:指定名稱+目錄
filename:'js/[name].js',
//輸出文件目錄若治,將所有資源輸出的公共目錄
path:resolve(__dirname,'dist'),
//所有資源引入公共路徑的前綴 'img/ss.png' =>'/img/ss.png'
//如果設(shè)置為<script src="/js/main.js"></script></body> 不設(shè)置為src="js/main.js"
publicPath:'/', //一般用于生產(chǎn)環(huán)境
chunkFilename:'js/[name]_chunk.js',//非入口chunk的名稱 (import引入的被打包出的chunk,optimization 0_chunk.js
//library是結(jié)合Dll使用
library:'[name]',//如果不寫,打包出的js文件是內(nèi)部調(diào)用函數(shù)感混,外部不能調(diào)用(function(){})(參數(shù))
libraryTarget:'window',//將library暴露出來的變量添加到window上browser
libraryTarget:'global',//放在node上
libraryTarget:'commonjs'//放在node上
},