webpack中output配置項中chunkFilename屬性的用法

chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多，都是用來將公共模塊提取出來，但是用法不一樣，這里主要介紹chunkFilename的使用

　　　　entry:{
		main:__dirname + '/app/main.js',
		index:__dirname + '/app/index.js'		
	},
	output:{
		path:__dirname + '/public', //通過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面
		filename:'/js/[name].js', //編譯生成的js文件存放到根目錄下面的js目錄下面,如果js目錄不存在則自動創建
		/*
		 * chunkFilename用來打包require.ensure方法中引入的模塊,如果該方法中沒有引入任何模塊則不會生成任何chunk塊文件
		 * 比如在main.js文件中,require.ensure([],function(require){alert(11);}),這樣不會打包塊文件
		 * 只有這樣才會打包生成塊文件require.ensure([],function(require){alert(11);require('./greeter')})
		 * 或者這樣require.ensure(['./greeter'],function(require){alert(11);})
		 * chunk的hash值只有在require.ensure中引入的模塊發生變化,hash值才會改變
		 * 注意:對於不是在ensure方法中引入的模塊,此屬性不會生效,只能用CommonsChunkPlugin插件來提取
		 * */
		chunkFilename:'js/[chunkhash:8].chunk.js'
	},

如果開了web-dev-server服務器，當require.ensure方法中引入的模塊發生變化,網站中加載的chunk.js文件的hash值會自動變化,而不需要手動重新打包或者重新運行web-dev-server。因為它會自動重新編譯,但現有的chunk.js文件的hash並不會更新，只是網站中加載的chunk.js文件更新了。如圖:

 

另外特別注意:如果某個文件只是引入了依賴的模塊，卻沒有調用模塊exports出來的方法，則該依賴模塊里的代碼不會執行，但網站還是會加載該chunk文件,如果exports的不是方法，而是其他類型的數據，則該依賴模塊里的代碼會執行。