寫在前面:這篇部落格主要介紹 前端軟體選擇及npm安裝webpack系列。本文也融入了作者實踐中的一些感觸。

上一篇關於前端的部落格node.js安裝及npm設定介紹了node(包含npm)之後。有段時間我就在想在想既然涉及到前端，得找個合適的前端ide。在公司問了個資深的前端，推薦我sublime和vscode。自己也私下裡看了好多的前端ide評價。綜合評估了下，最後選擇了sublime，Hbuilder。選sublime是看重它的輕量級和擴充套件性，對於學習本來就要多敲程式碼，sublime就是個高階記事本這點沒問題，如果以後用它工作了，可以通過安裝外掛提高效率，這是我比較看好的。Hbuilder 先放著以後弄APP的時候在研究。

sublime安裝：

環境win7 sublime3

• sublime3是收費的，可以先安裝，裝完後到下面網址看註冊方法 註冊碼及配置 
• 好了之後，開啟sublime3，發現真不錯（至少看著挺舒服的）。

npm安裝webpack、webpack-cli、webpack-dev-server

用我的理解大致說下3個模組的功能，系統瞭解還是要去官網看看：

webpack: 打包外掛，在前端的作用可以類比下maven在後端的功能；老闆本包含webpack-cli，新版本不包含。

webpack-cli: weipack命令列客戶端，可以執行webpack命令的工具；。

webpack-dev-server: webpack本地開發伺服器，基於node.js。就類似於apache、nginx用做web伺服器的。

npm安裝模組有兩種方式。全域性方式和本地方式（安裝到專案路徑下），至於該用那種方式安裝，這個我還真的不是很清楚。上篇文章配置的既是全域性安裝的一些配置。

就我個人理解，node.js，npm，webpack都是為開發時提高開發效率的，真正生產環境應該不會裝這些東西的。要是圖方便就裝全域性就OK了，多個專案可以共享資源。要是想做到資源隔離，那就本地安裝就好了。因為接觸還不是很多，先給出結論，後續驗證。實踐過程中發現，webpack系列安裝過程中依賴package.json，而這個檔案是npm init初始化專案的產物。言外之意就是webpack是專案相關的。所以在開發的過程中還是本地安裝比較合適。

安裝webpack：

    全域性安裝：npm install -g webpack    本地安裝：npm install webpack

安裝webpack-cli：

    全域性安裝：npm install -g webpack-cli   本地安裝：npm install webpack-cli

安裝webpack-dev-server:

    全域性安裝：npm insall -g webpack-dev-server   本地安裝：npm install webpack-dev-server

webpack 打包應用:

webpack直接打包：

webpack app/main.js public/bundle.js

配置webpack.config.js 後打包：

webpack

module.exports = {
  mode:'development',
  //devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口檔案
  output: {
    path: __dirname + "/public",//打包後的檔案存放的地方
    filename: "bundle.js"//打包後輸出檔案的檔名
  },
  devServer:{
  	contentBase:__dirname + "/public",//本地伺服器所載入的頁面所在的目錄
  	historyApiFallback:true,//不跳轉
  	inline:true//實時重新整理,查了下這個預設就是true
  }
}

其中mode、entry、等都可以在cmd裡通過webpack --help檢視 output:{path.. 對應--output-path。__dirname是node.js裡的全域性變數，表示當前執行指令碼所在的路徑，這個裡面都是自己配置的啊

配置package.json後打包 

npm run build 或者 npm start 或者npm run server 啟動服務

前者有引數，後者沒引數。前者的引數會覆蓋webpack.config.js裡的mode配置。

--open \"Chrome\"用谷歌瀏覽器顯示網頁內容，其中選項也可以在webpack.config.js中配置，就像webpack的mode選項一樣,除了scripts內容項，其它的都是裝模組（外掛）的時候自動生成的

{
  "name": "webpack_test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "webpack --mode production",
    "server": "webpack-dev-server --open \"Chrome\""
  },
  "author": "john",
  "license": "ISC",
  "description": "webpack_test",
  "devDependencies": {
    "babel-loader": "^7.1.4",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }
}

至此，前端開發環境告一段落。接下來就是用vue.js實戰前端開發。

時間有限，全棧工程師不容易，一步一個腳印，且行且珍惜。。。。。