Michael_Jheng的部落格

Webpack 是一個開源的前端打包工具,Webpack 提供了前端開發缺乏的模組化開發方式,將各種靜態資源視為模組,並從它生成優化過的程式碼,要深度了解Webpack可進入Webpack官方網站與原始碼庫了解

Webpack官方網站

Webpack原始碼庫

要使用 Webpack 前須先安裝 Node.js,下面提供Node.js載點與教學

[應用軟體]安裝Node.js

安裝完成後打開Node.js,先安裝vue cli，執行以下命令安裝vue cli

npm install -g vue-cli 

安裝完vue cli後,就可進行vue-webpack模板創建項目了,首先切換目錄至想要創建的資料夾中,輸入

vue init webpack your-project-name

可以參考下圖來進行操作

按下Enter後就會進入創建設定部分,可以參考下面一系列創建圖片解說,

進行這一步會出現創建解說,按下Enter就可進續進行

進行到這一步,就知道專案已經創建完成,下圖所示

專案創建完成之資料夾內容

在Node.js上,將目錄切換於此

下一步就是要來進行安裝,安裝指令為

npm install

安裝過程需要等待一段時間,安裝完成會出現node_modules資料夾

在node_modules裡頭資料相當多

,

接下來是非常重要的一步,執行此專案,輸入指令為

npm run dev 

等待一段時間,閱覽器打開127.0.0.1:8080，可以看到以下畫面：

在Node.js會出運行中的訊息,

接下來要進行發佈教學,Ctrl + C來取消此運行,輸入指令

npm run build

等待一段時間後,出現下圖畫面就是發佈檔完成

在專案資料夾會出現dist

dist資料夾內容如下

static資料夾內容如下

css資料夾內容如下

js資料夾內容如下

這裡已XAMPP這軟體來進行發佈操作,如果沒有安裝XAMPP可至官網下載安裝

XAMPP官方網站

將dist資料夾複製至xampp中的htdocs資料夾裡

在XAMPP操作控制板中,進入Apache(httpd.conf)進行設置

修改246 ~ 247行,下圖所示

到XAMPP操作控制板按下start,

在按下Admin,就會出現下圖畫面,就可證明發佈檔能正常運作