上一篇文章留下了一些問題,如果你沒看過上一篇文章,可以在我的博客里查找,或者直接從這篇文章開始也是沒問題的。 這是上一篇文章中使用但是沒有詳細講解的代碼片段。現在我們來一一做一個瞭解。 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裡面修改兩句代碼,發現已經可以熱更新咯。