走近webpack(1)--多入口及devServer的使用


  上一篇文章留下了一些問題,如果你沒看過上一篇文章,可以在我的博客里查找,或者直接從這篇文章開始也是沒問題的。 

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里面修改兩句代碼,發現已經可以熱更新咯。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM