(17/24) webpack實戰技巧：生產環境和開發環境並行設置,實現來回切換

1. 概述

生產環境和開發環境所需依賴是不一樣：

--開發依賴:就是開發中用到而發佈時用不到的。在package.json裏面對應的就是devDependencies下面相關配置。

--生產依賴: 就是好比咱們的javascript使用了jquery,而咱們最終的程序也須要這個包(最終程序正常運行須要的)。這個包就在package.json下的dependencies中。

2. npm安裝方式對比

假如咱們要在項目中使用jquery庫。採用（2.1~2.3三種方式）

2.1 全局安裝

npm install jquery

或者

npm install jquery -g

安裝完成後，會發如今package.json中並不存在這個包的依賴。這是因爲全局安裝將安裝包放在 /usr/local 下或者你 node 的安裝目錄,例如windows上的安裝地址爲  C:\Program Files\nodejs\node_modules\webpack_tmp。使用這種安裝方式咱們能夠

直接在命令行裏使用。當咱們把項目拷貝給別人繼續開發，或者別人把咱們發佈到的git上代碼clone下來，使用npm install安裝相關包時就會缺乏這個jquery包。項目就會沒法正常運行，因此這也是咱們最不同意的安裝方法。

2.2 安裝到生成環境

安裝指令爲：

npm  install jquery --save

它存在於package.json的dependencies中，它是生產環境須要依賴的包（上線時須要的依賴包）。

執行該條指令後產生的後續效果爲：

(1)會把jquery包安裝到node_modules目錄中

(2)會在package.json的dependencies屬性下添加jquery

(3)以後運行npm install命令時，會自動安裝jquery到node_modules目錄中

(4)以後運行npm install --production或者註明NODE_ENV變量值爲production時，會自動安裝jquery到node_modules目錄中

2.3 安裝到開發環境

安裝指令爲：

npm install jquery --save-dev

安裝完成後，它存在於package.json的devDependencies中，它是開發環境中須要使用的，但上線時並不須要這個包的依賴。

執行該條指令後產生的後續效果爲：

(1)會把jquery包安裝到node_modules目錄中

(2)會在package.json的devDependencies屬性下添加jquery

(3)以後運行npm install命令時，會自動安裝jquery到node_modules目錄中

(4)以後運行npm install --production或者註明NODE_ENV變量值爲production時，不會自動安裝jquery到node_modules目錄中

 2.4 本地安裝所有項目依賴包

當咱們從GIT上面拷貝一個包要安裝全部的包就必須進行本地安裝，

安裝指令爲：

npm install

執行該條指令後產生的後續效果爲：

（1）將項目所需的安裝包（開發包、生產包）放在 ./node_modules 下（運行 npm 命令時所在的目錄），若是沒有node_modules目錄，會在當前執行npm命令的目錄下生成node_modules目錄。

（2）能夠經過 require()來引入本地安裝的包。

2.5 安裝生產環境依賴包

安裝指令爲：

npm install --production

添加了production參數後將只安裝package.json中dependencies裏面的包,不會安裝devDependencies裏面的包。

3.配置生產和開發並行

咱們在之前的配置中設置了一個變量website，用於正確找到靜態資源路徑。若是咱們生產環境和開發環境中的相關路徑不同，那咱們就得在兩個環境中來回切換，這時咱們就得修改以前的路徑配置方式。

 之前的路徑配置：

var website ={
    publicPath:"http://localhost:1818/"
}

 3.1 實如今生產環境和開發環境中來回切換的配置

實質爲運行不一樣的指令，得地所需結果。

3.1.1 修改package.json命令

實質爲添加dev設置、build設置，並經過環境變量來進行區分，下面是package.json裏的值。

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webpack",
    "build": "set type=build&webpack"
  },

3.1.2 修改webpack.config.js文件

利用node的語法來讀取type的值，而後根據type的值用if–else判斷當前指令執行的是開發環境下的打包操做仍是生產環境下的打包操做。

if(process.env.type== "dev"){
    var website={
       publicPath:"http://localhost:1818/"  //開發環境中的路徑配置
    }
}else{
    var website={
       publicPath:"http://www.wfaceboss.top/" //生產環境中的路徑配置
    }
}

若是想看一下執行打包指令時傳過來的值究竟是什麼？能夠在webpack.config.js用下面的輸出語句

console.log( encodeURIComponent(process.env.type) );

 

 

 

 Mac下的package.json設置:

MAC電腦下須要把set換成export，而且要多加一個&符，具體代碼以下。

"scripts": {
    "server": "webpack-dev-server --open",
    "dev":"export type=dev&&webpack",
    "build": "export type=build&&webpack"
  },