一瀑志、建立webpack配置文件
新建一個(gè)項(xiàng)目目錄如下：
之所以在項(xiàng)目下建立一個(gè)webpack.config.js文件是因?yàn)槿绻苯邮褂脀ebpack這個(gè)命令的話webpack會(huì)直接在項(xiàng)目的根目錄里尋找這個(gè)webpack.config.js晶密，把它作為默認(rèn)的配置去運(yùn)行。webpack命令后不需要加任何的參數(shù)吗货。當(dāng)然也可以通過--config這個(gè)參數(shù)來(lái)指定其他的配置文件。
webpack --config 指定的配置文件
webpack --config a.js
下面來(lái)編寫webpack.config.js里的內(nèi)容:
module.exports = {
entry: './src/script/main.js', //表示打包的入口是從哪個(gè)文件開始
output: { //指明打包以后的文件放在什么地方
path: './dist/js',
filename: 'bundle.js' //打包以后的名字叫什么
}
}
運(yùn)行完webpack命令就會(huì)打包好一個(gè)bundle.js文件放在dist/js目錄下尚揣，說明配置生效了倒慧。
現(xiàn)在想通過webpack直接在命令行里去運(yùn)行我的配置所加的一些參數(shù)，配合npm的一些腳本枚驻，npm的package.json里有個(gè)屬性叫"script"濒旦，在這個(gè)屬性里可以定義一個(gè)腳本≡俚牵可以指定默認(rèn)的config文件尔邓、打包的過程晾剖、打包的模塊、打包的字是彩色的梯嗽、打包的原因等等齿尽。內(nèi)容如下圖：
最后只需要在命令行里執(zhí)行npm run webpack命令，這個(gè)腳本就會(huì)被運(yùn)行了灯节，得到打包的腳本循头。
二、webpack配置的entry和output
entry
整個(gè)webpack打包的一個(gè)入口
有三種輸入方式：
1显晶、是一個(gè)簡(jiǎn)短的string類型贷岸，也就是指定一個(gè)入口文件，所有的依賴都在這一個(gè)入口文件中指定磷雇。
//語(yǔ)法
entry: './src/script/main.js'
2偿警、是一個(gè)數(shù)組。這種情況其實(shí)是webpack為了解決兩個(gè)平行不相依賴的文件卻想打包在一起的這種情況唯笙。
//語(yǔ)法
entry: ['./src/script/main.js', './src/script/a.js']
3螟蒸、是一個(gè)對(duì)象。分為key和value
key表示chunk name , value表示真實(shí)的一個(gè)entry
傳入一個(gè)對(duì)象所使用的場(chǎng)景：在多頁(yè)面應(yīng)用程序中會(huì)用到這種方式崩掘。
//語(yǔ)法
entry: {
main: './src/script/main.js',
a: './src/script/a.js'
}
output
打包以后的文件放在什么地方七嫌，文件叫什么名字
output: { //指明打包以后的文件放在什么地方
path: './dist/js', //打包后文件所在位置
filename: 'bundle.js' //打包以后的名字叫什么
}
注意filename
如果你的entry是一個(gè)單入口，是一個(gè)簡(jiǎn)單的字符串路徑苞慢，定義的filename: 'bundle.js'是一個(gè)寫死的名稱诵原，生成的文件就是bunld.js
如果你的entry是一個(gè)多輸入，是一個(gè)對(duì)象挽放，key和value會(huì)有多對(duì)绍赛，多個(gè)chunk。這個(gè)時(shí)候如果filename還是寫死的那多個(gè)入口文件就會(huì)覆蓋辑畦，只會(huì)生成一個(gè)bundle.js吗蚌。所以有多輸入的時(shí)候不要寫死。
可以用一些占位符來(lái)保證輸出的文件名是惟一的纯出。占位符有三個(gè)：
1蚯妇、[name]：表示chunk的name，也就是entry作為一個(gè)對(duì)象前面的key暂筝。
2箩言、[hash]：每次打包生成的hash。
3焕襟、[chunkhash]：每一個(gè)chunk自己的hash值分扎。只有當(dāng)文件發(fā)生改變時(shí)才會(huì)改變。
output: {
path: './dist/js',
filename: '[name]-[hash].js'
}
