A. mac下使用npm run dev（webpack）埠佔用問題
在使用webpack進行打包過程中，我們使用npm run dev運行項目，當我們使用control+c時並不能真正的關掉進程，導致毀世項目埠被佔用，下次用同樣的項目就是報錯
以下是解決方法：
方法一：纖鉛肢lsof -i tcp:xxxx 命令可以查激首看xxxx埠所對應的pid，然後使用kill命令
kill xxxx
kill -9 xxxx 強制刪除
方法二：mac下啟用活動監視器，可以在活動監視器右上角搜索欄輸入node，就會出現相關的進程，選中之後，選擇強制退出（本機嘗試退出無效，所以點擊強制退出）
B. webpack安裝步驟及文件
1.檢查是否有安裝npm。
在windows系統下，同時按下windows+R調出命令，輸入CMD，如下圖：
圖1
打開命令工具，輸入命令：npm -v
如下圖：
圖2
圖中顯示了5.6.0說明已經安裝了npm，顯示的5.6.0是npm的版本，如果沒有安裝的話就要先去安裝一下npm之後再繼續接下去的操作；
2.進入項目文件夾並冊舉搜生成package.json文件。
新建一個空文件newitem，如下圖：
圖3
然後用命令工具進入這個新項目的空文件夾，然後再輸入npm init，如下圖：
圖4
3.為項目添加webpack依賴。
在命令工具中州歷輸入命令：npm install webpack --save-dev
如下圖：
圖5
完成以上操作之後你會發現你新建的項目文件裡面多了一些文件，如下圖：
圖6
4.新建webpack.config.js配置文件。
圖7
接著就可以通過package.json文件中的scripts來啟動不同的服務，而webpack.config.js文件是用來設置webpack相關服務內容的。
下一篇文章再具體講解如何在webpack.config.js之中進行答灶各種配置了。
C. Mac webpack 安裝報錯 permission denied, mkdir '/usr/local/lib/ vue-cli初始化項目
解決派族滑辦法
sudo npm install webpack -g
或
sudo npm install webpack -g --unsafe-perm=true --allow-root （我用的此方法）
或
sudo npm install webpack -g --unsafe-perm=true
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
翻譯過來就是： 'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
很塵臘可能是項目 install 時不完全造成的， 可以使用 cnpm install 境內安裝
項目初始化時最後會讓你選擇是否install和install途徑， 最好是選擇稍後手動安裝 cnpm install
剛拿到項目時， npm start 或npm run dev 包這個錯 先執行cnpm install 安裝依賴文件
都是圖、都是圖 😂😂😂😂😂
項目穗搏初始化參考：
https://www.jianshu.com/p/1626b8643676
D. 安裝webpack後還是提示webpack不是內部命令
因為安裝步驟出現了問題。
1.首先你需要安裝一個全局的webpack；
npm install webpack -g；
這樣你才可以正確的使用webpack這個命令；
2.然後, 你還可以在當前項目裡面也安裝一個webpack, 這也是官方推薦的做法；
npm install webpack --save-dev；
這樣就仿睜可以在你的webpack.config.js裡面方便的引用webpack；
// webpack.config.js；
var path = require('path');
var webpack = require('webpack');
3.然後在使用一些plugin的時候就比較方便了；
new webpack.optimize.CommonsChunkPlugin('common.js')。
E. 如何在電腦上安裝webpack
webpack 學習：
一：安裝：
1.webpack 是基於滾碧nodes.js的，
a.先安裝node.js
下載node.js的程序。點擊安裝node.js
b.安裝完後.打開cmd的窗口；快捷鍵（window + r 組合鍵）
3
c.根據項目所在路徑盤安裝webpack；如項目是在F盤，則安裝方法如下：
1.指定在F盤安裝：輸入F： 回車
4
2.全局安裝：輸入npm install webpack -g 回車 成功大缺舉出現如下：
5
3.進入項目所在路徑安裝配置文件：package.json
如項目路徑：找到路徑 cd .....
6
則cmd輸入：路徑找到之後 輸入 npm init 回車 開始配置文件；
7
開始配置的文扮此件過程如下：出現之後只要回車即可：
F. webpack基本使用
step1: 創建一個項目錄
注意：項目名一般 不要帶中文
step2: 創建 package.json
或者：
step4: 處理第三方文件
html文件中需要引入多個js文件或者第三方模塊(例如：jquery.js)，只引入項目js入口文件( main.js ),其他js文件均在入口文件中導入。導致可能JS文件中使用了瀏覽器不薯早識別的高級語法:
總結：webpack可以做兩件事情況：
step5: 配置入口文件和出口文件
每次修改js文件，手動輸入命令： webpack 入口文件路徑 -o 出口文件路徑 重新打包， 每次都要輸入入口文件和宏鋒出口文件，麻煩。可以在項目目錄下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 實現自動打包編譯
每次修改js文件，都要手動重新打包，還是麻煩？使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能。
webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中必須安裝 webpack
在 package.json 文件中配置命令：
在終端中執行命令：
註：在終端執行 npm run dev ，就等於執行 webpack-dev-server 命令。這將在node中開啟一個伺服器，並且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自動監聽文件改變，並且自動打包。
改變文件引用路徑：
執行上述命令後終端會有類似信息輸出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具將項目託管到localhost:8080/埠上
【webpack output is served from /】——打包好的文件通過localhost:8080/bundle.js訪問
【Content not from webpack is served from C:UsersyfbDesktop前端學習案例4.27wabpackDemo_1src】——不是通過webpack打包的文件，則是以src為根目錄訪問。
該項目根目錄下並不存在bundel.js文件，我們可以認為webpack-dev-server把打包好的文件，以一種虛擬的形式託管到了咱們項目的根目錄中，雖然我們看不到它，但是可以認為和 dist、src、node_moles平級，有一個看不見的文件，叫做 bundle.js。其實是為了頻繁打包，提高效率，直接把打包的文件放在內存中。
因為項目託管到新伺服器，現在應該訪問的是 該伺服器 下的項目，文件引用路徑也要改變:
step7: 自動打開瀏覽器進行訪問、配置埠號、指定託管的根蔽手晌目錄、熱重載（只是修改補丁，不重新生成整個bundle.js文件）
在 package.json 中配置命令，並重啟伺服器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性。
安裝 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的兩個作用：
step9: 處理樣式文件
html文件中需要引入css、less、sass樣式文件。默認情況下，webpack處理不了這些樣式文件。
處理css文件：
處理less樣式文件
G. 全局 安裝webpack 本地工程 怎麼調用
看看webpack官網, 比installation章節, 面介紹安裝webpack.
首先需要安裝差桐全虛納坦局webpack
npm install webpack -g
才確使用webpack命令
, 前項目面安裝webpack, 官推薦做茄正
npm install webpack --save-dev
自webpack.config.js面便引用webpack
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
使用些plugin候比較便
new webpack.optimize.CommonsChunkPlugin('common.js')
H. Mac 系統配置Vue開發環境
首先安裝nodejs
終端輸入：brew install nodejs 或者直接官網手動春源世安裝。 node -v 查看 nodejs版扒肢本
註：網上說使用終端安裝會需要nodejs模塊安裝目錄的許可權，運行：sudo chmod -R 777 /usr/local/lib/裂飢node_moles/
3、安裝npm （淘寶鏡像）
終端輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安裝webpack
cnpm install webpack -g
5、安裝vue腳手架（自動搭建vue項目框架的工具）
sudo npm install -g vue-cli。靜待。
輸入vue或者vue list，可vue是否安裝成功。
I. webpack配置
一個打包工具
npm install --save-dev webpack : 安裝Webpack
npm install webpack webpack-cli --save-dev :此工具用於在命令行中運行 webpack
webpack 開箱即用，可以無需使用任何氏畢返配置文件。webpack 會假定項目的入口起點為 src/index.js ，然後會在 dist/main.js 輸出結果，並且在生產環境開啟壓縮和優化。
在package.json文件中添加命令，然後通過npm run build即可運行打包
但是通常項目還需要繼續擴展此能力，為此可以在項目根目錄下創建一個 webpack.config.js 文件數旁，然後 webpack 會自動使用它。
也可以根據特定情況使用不同的配置文件，則可以通過在命令行中使用 --config flag 修改此配置文件名稱。
每個html頁面都有一個入口點，單頁面應用：一個入口起點；多頁面應用：多個入口起點
mode?: "development" | "proction" | "none";
。。。。。
（webpack 提供合理的默認值，但是還是可能會修改一些解析的細節）
條件的輸入值由兩種，
在條件中，對 resource 進行匹配的屬性有 test / include / exclude / resource
在條件中，對 issuer 進行匹配的屬性有 issuer
註：當使用殲飢多個條件屬性時，需要同時滿足，當屬性條件為數組時，滿足數據中的一個即可
可以對匹配規則的模塊進行 應用loader 或者 解析選項對象
oneOf?: RuleSetRule[];
rules?: RuleSetRule[];
webpack配置示例：
J. webpack安裝失敗，請問這樣要怎麼解決
可以看看webpack的官網的, 比如在installation這個章節, 裡面就介紹了怎麼安裝webpack.
首先你需要安裝一個全局的webpack
npm install webpack -g
這樣你才可以正確的使用webpack這個命令
然後, 你還可以在當前項目裡面也安裝一個webpack, 這也是官方推薦的做法
npm install webpack --save-dev
這樣就可以在你的卜衫webpack.config.js裡面方便的引用webpack
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
然後在使用一些plugin的時候就比較方便了
new webpack.optimize.CommonsChunkPlugin('common.js')
或者你可以看看webpack的官網的, 比如在installation這個章節,
裡面就介紹了怎麼安裝webpack. 首先你需要安擾弊做裝一個全局的webpack npm install webpack -g
這樣你才可以正確的使用webpack這緩衡個命令 然後, 你還可以在當前項目裡面也安裝一個webpack, 這也...