(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"
  },