Vue學習筆記之Webpack的使用

一、webpack的使用：

專案結構：

src：原始碼

dist：打包後的檔案，用於釋出的檔案（bundle.js就是打包後的檔案，然後在index.html引用即可）

同cmd進行專案打包：

打包完，在專案dist目錄下就會生成一個打包檔案bundle.js檔案，在執行頁呼叫此js檔案，執行結果：

PS：只需打包入口函式（只打包main.js），其他依賴類會自動打包

有兩種開發模式CommonJS、ES6兩種模組化開發：

ES6：

引用：

重新打包後執行情況：

二、webpack.config.js配置和package.json ：

在配置檔案的時候，需要node.js的環境，在項的目錄下初始化環境：npm init，生成package.json配置檔案

生成package.json：

PS："license": "ISC" 如果不是開源的，則可以刪除句話。

安裝依賴：npm install

webpack.config.js配置：出口入口配置好後，在專案目錄下，直接輸入webpack就可以進行打包了，省去一些檔案的路徑了，因為路徑都配置在此檔案裡面了：

npm run build = webpack 對等起來，自定義啟動命令：

執行並測試成功：

三、區域性安裝webpack：給本專案配置webpack的環境，在打包時，會先找本專案的環境，未找到才會去找系統的環境，一般情況下，專案都會用自己的環境進行打包，用開發時依賴進行安裝：cnpm install webpack@3.6.0 --save-dev

區域性安裝完後，在idea的終端執行 npm run build 時就用的是本專案的webpack環境，優先找區域性的webpack環境，如果有就不會再呼叫全域性變數的webpack；否則才去呼叫全域性變數的webpack環境。