webpack入門

標籤：com   靜態   http   資源管理   使用   產生   表示   blog   img   

webpack是運行在Node.js中的靜態資源管理器，將各種依賴檔案產生.js,.css,.png等檔案。可通過npm包管理工具進行安裝。

一、安裝：在命令列中輸入npm install webpack -g指在全域環境中安裝webpack，之後webpack -h可查看安裝的webpack，

之後就可以了使用webpack命令了

二、使用：安裝完webpack後就可以了使用了，你可以在任何檔案夾下建立一個檔案夾，建立index.html檔案

可以看到引用的是bundle.js檔案，現在我們並沒有這個檔案，那我們就來建立這個檔案，當然並不是我們去直接建立一個bundle.js檔案。我們建立一個js檔案夾，裡面建立一個index.js檔案，如，之後我們就是用webpack將這個js檔案打包產生我們需要的bundle.js檔案，必須先使用命令列進入我們這個檔案目錄，然後使用命令webpack index.js bundle.js,之後，命令列會顯示代表我們成功執行了命令，

 

，在js檔案夾下你就會看到自動產生的bundle.js檔案，然後運行index.html，你會發現瀏覽器顯示了It works,這表示我們已經成功產生了bundle.js檔案。

三、添加模組：當然webpack的功能不僅限於此，而是對多個相依模組打包，現在我們就在js檔案夾下建立一個module.js檔案，並添加代碼，之後我們更改我們的index.js檔案，之後在命令列中再次使用webpack index.js bundle.js然後重新整理瀏覽器我們發現，瀏覽器輸出了，這表示我們的module.js模組添加成功了。

 

webpack入門