webpack是模塊化打包工具，那么webpack到底是怎么樣進行模塊化的呢？我們在引入js文件的時候是通過許多的<script>標簽進行引入的，那么我們可不可以將這么多js文件合并成一個js文件，再進行引入呢？這樣可以減少香服務器請求次數，加載速度可以加快。下來我們開始！

一、在app-test下面建立一個js文件夾，里面有兩個js文件，一個是test.js文件，一個是index.js文件。它們的內容如下：

//test.js
console.log("我是test.js");

//index.js
console.log("我是index.js");

二、接下來在我們將兩個js合并為一個js文件之前，我們先來了解一下webpack.config.js文件里面entry的值的類型：

entry:."/js/index.js"			                //string
entry:["./js/test.js","./js/index.js"]			//array        把多個文件打包成一個文件，哪個先執行，就把哪個寫在前面
entry:{
	a:"./js/test.js",
	b:"./js/index.js"
}							//object

三、我們要把兩個js文件合并成一個js文件，我們將test.js和index.js打包到build下面的bundle.js，那么我們選擇第二種：

四、打包后的文件bundle.js的文件內容是：

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t){console.log("我是index.js")},function(e,t){console.log("我是test.js")},function(e,t,n){n(1),e.exports=n(0)}]);

打包好以后，我們只需要引入bundle.js一個文件，即可執行兩個js文件，用瀏覽器打開index.html在控制臺就可以看見輸出結果。

五、下面我們在app-test下面出啊構建一個文件夾叫做public，里面建立了test.html文件和list.html文件，在js文件夾下面再建立一個list.js文件，內容如下：

//list.js
console.log("我是list.js");

目前文件app-test下面的文件情況如下：

六、一般情況下，我們不同的html文件引入不同的js文件，那么我們就選擇entry的類型為object。在進行這之前，我們先了解一下output的值的類型：

output:{
	path:path.resolve(__dirname,'build'),
	filename:"bundle.js"		//string用于單個入口點
	filename:"[name].js"		//用于多個入口點
	filename:"[chunkhash].js"	//用于長效緩存
}

七、我們此時采取的出口文件就是filename:“[name].js"，name會遍歷入口的所有鍵值，將鍵值作為新打包文件的文件名(如下示例中，鍵值就是index,test,list)。webpack.config.js文件內容如下，我們在打包之前將build文件下的內容清空。

八、現在我們用npm run build命令進行打包，如下圖是打包結果的信息顯示：

我們去build文件夾下面會發現有三個打包好的js文件，分別是list.js，test.js，index.js。然后我們就可以將打包的三個js文件引入不同的html文件。

微總結：本次主要認識了webpack.config.js文件夾下的entry和output的值的類型。