上一篇文章留下了一些問題，如果你沒看過上一篇文章，可以在我的博客里查找，或者直接從這篇文章開始也是沒問題的。 這是上一篇文章中使用但是沒有詳細講解的代碼片段。現在我們來一一做一個瞭解。 entry：配置入口文件，也就是你想要打包的文件路徑。可以是單一的，也可以是多入口文件。下麵會詳細的講解。‘ ou ...
上一篇文章留下了一些問題，如果你沒看過上一篇文章，可以在我的博客里查找，或者直接從這篇文章開始也是沒問題的。
const path = require('path');
module.exports={
entry:{
entry:'./src/entry.js'
},
output:{
path:path.resolve(__dirname,'dist'),
/*上面的代碼中還有path以及__dirname的意思就是指獲取到當前項目的絕對路徑，涉及到了node.js的相關知識，這裡不做過多的解釋，有興趣的小伙伴可以自己去找一下資料。*/
filename:'[name].js'
/*這裡name的意思就是指獲取入口文件的名稱用來作為出口文件的名稱，這樣你就不用有幾個入口就寫幾個出口名稱啦*/
},
module:{},
plugins:[],
devServer:{}
}
這是上一篇文章中使用但是沒有詳細講解的代碼片段。現在我們來一一做一個瞭解。
entry：配置入口文件，也就是你想要打包的文件路徑。可以是單一的，也可以是多入口文件。下麵會詳細的講解。‘
output：配置出口文件，也就是你想要在那個文件夾下麵生成打包後的文件。同樣的，既然入口可以是多文件，那麼出口也可以是多出口的。
module：模塊配置，主要用於一些loader的使用，用於轉換編譯less，sass，圖片等文件。
plugins：配置插件，如果想要更多的功能滿足項目的需求，那麼你需要使用到插件。
devServer：配置開發服務功能，後面會更詳細的介紹。
那麼簡單配置介紹完了，下麵我們一起看一下多入口以及多出口文件是如何應用的
首先我們在dist目錄下的index.html做一下簡單的修改，我們引入另外一個名稱為entry2.js的文件，並且把body中的代碼修改成下麵的這個樣子。
<div id="title"></div> <div id="name"></div> <script src="./entry1.js"></script> <script src="./entry2.js"></script>
然後，我們在src目錄下新建一個entry2.js，裡面寫上這樣的代碼。
document.getElementById('name').innerHTML="我是入口2的文件哦，看我打包成功了沒？";
第三步，在webpack.config.js中entry的配置項下增加一個入口鏈接，
entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js', //這裡我們又引入了一個入口文件 }
OK，至此我們的項目就修改完成，試一下在命令行中輸入npm run build之後的結果吧。
此時我們的目錄結構看起來是這樣的：
在瀏覽器中打開index.html，會發現出現了兩句話。那麼就說明打包成功咯。
至此，你已經學會了入口出口，以及多入口多出口文件的配置。接下來我們來學一下devServer能做些什麼，要怎麼做。
首先我們來安裝一下webpack-dev-server，
運行下麵的命令，等待完成就可以了，完成後你會看到package.json中devDependencies項下麵多了一個webpack-dev-server及其相應的版本號。
npm install webpack-dev-server --save-dev
那麼，webpack-dev-server究竟是用來做什麼的呢？它主要是啟動了一個使用express的http伺服器，用來伺服資源文件。
OK，安裝完成之後，我們需要在webpack.config.js的devServer選項中寫幾行簡單的代碼：
/*設置基本目錄結構，也就是你想要使用服務的目錄地址*/ contentBase:path.resolve(__dirname,'dist'), /*伺服器的IP地址，可以使用IP也可以使用localhost*/ host:'localhost', /*服務端壓縮是否開啟，目前開不開都行，想關你就關*/ compress:true, /*配置服務埠號，建議別用80，很容易被占用，你要是非要用也是可以的。*/ port:9090
然後，在package.js中的scripts選項中再配置一個命令腳本，它看來應該是這樣子滴：
好了，現在該寫的代碼都寫完了，咱們來看看效果。
在命令行中輸入npm run server,唉？！有趣的事情發生了，竟然報錯了。錯誤說讓你安裝webpack-cli，行吧，那麼咱們再安裝一下webpack-cli。
npm install webpack-cli -D
安裝完webpack-cli，我們興緻勃勃地去npm run server，發現又TM錯了，咋個回事。
先別急，我們來看一下報錯信息：
不想看的小伙伴可以不看，這都什麼啊！在你安裝完webpack-cli後，會提示你一些安裝包（webpack-cli，webpack-dev-server等）需要webpack版本在4.0以上，如果你不當回事繼續npm run server，就會報錯了。回頭看一下發現咱們的webpack版本是3.6.0。有碼為證，確實是。
既然是這樣那就升級一下webpack版本吧。咱們直接在上面的代碼上修改，當前最新版本的webpack是4.1.1。咱們就用最新的！改好了之後是這樣滴！
咱們再npm install重新安裝一下。
安裝完成，咱們再！我保證最後一次！npm run server一下下。
我想這樣子應該是成功了。咱們打開瀏覽器輸入http://localhost:9090/看一下，呦呵！出來了。
看起來好像不錯的樣子，我們在src下的隨便一個entry裡面修改兩句代碼，發現已經可以熱更新咯。
