webpack入門指南-step04

標籤：檔案夾   localhost   str   程式   .config   module   webp   配置   文章   

一、建立項目

建一個檔案夾，然後建立一個package.json的檔案在項目根目錄下

如果你使用git管理你的這個項目的話，建議你建立一個.gitignore檔案，不要讓git提交一些node依賴的模組， 你也可以參考github的例子 https://github.com/github/gitignore/blob/master/Node.gitignore

我們這裡就簡單一點

二、項目結構

現在項目裡面就有一個package.json， 我們多加一點東西，慢慢豐富它的內容。

• /app
  • index.js
  • sub.js
• package.json
• webpack.config.js

添加了兩個js檔案，添加了最重要的webpack的設定檔，我們還是從非常簡單的hello world開始玩起，webpack原生直接支援AMD和CommonJS兩種格式，如果你想使用ES6的風格，這點以後再提。

JS代碼

sub.js

index.js

代碼寫完了，完成一個很簡單的功能，建立一個單獨的module，並且在另外一個module裡面引用他，最後會在頁面裡面輸出兩個標題。

三、配置Webpack

現在開始配置webpack，目標是把這兩個js檔案合并成一個檔案. 我們可以自己在build檔案夾裡面手動建一個index.html檔案夾，然後再把合并以後的js引用在裡面，但是這樣有些麻煩，所以我們這裡安裝一個plugin，可以自動快速的幫我們產生HTML。

npm install html-webpack-plugin --save-dev

好 有了這個外掛程式 開始寫config檔案

然後在項目根目錄運行

webpack

終端顯示一堆資訊，然後告訴你成功了。

你可以使用webpack --help看看一些啟動並執行時候可選的參數

你會發現多出來一個build檔案夾，直接點開裡面的html檔案，你會發現我們可愛的“hello world”已經插入到頁面了。我們的任務完成了，成功產生html，合并js，html引入了js，js被執行了。

 四、配置webpack-dev-server

上面任務雖然完成了，但是我們要不斷運行程式然後查看頁面，所以最好建立一個程式開發伺服器，可以serve我們pack以後的代碼，並且當代碼更新的時候自動重新整理瀏覽器。

安裝webpack-dev-server

更新, 這裡還是全域安裝比較好

npm install webpack-dev-server －g

安裝完畢後 在config中添加配置

然後再package.json裡面配置一下啟動並執行命令,npm支援自訂一些命令

好了，萬事具備了，在項目根目錄下輸入npm start,一堆花花綠綠的資訊後server已經起來了，在瀏覽器裡面輸入http://localhost:8080 發現偉大的hello world出現了，在js裡面隨便修改一些輸出然後儲存, boom!瀏覽器自動重新整理，新的結果出現了。

拓展閱讀 如果你的伺服器端使用的是express架構，你還可以直接安裝express的middleware，webpack配合express，很好用。

npm install webpack-dev-middleware --save-dev

更多的詳情 請參考這篇文章

https://blog.risingstack.com/using-react-with-webpack-tutorial/

webpack入門指南-step04