Development / Production不同配置文件打包

項(xiàng)目開發(fā)時(shí)一般需要使用兩套配置文件，用于開發(fā)階段打包（不壓縮代碼，不優(yōu)化代碼，增加效率）和上線階段打包（壓縮代碼，優(yōu)化代碼，打包后直接上線使用）

抽取三個(gè)配置文件：

• webpack.base.js

• webpack.prod.js

• webpack.dev.js

步驟如下：

1. 將開發(fā)環(huán)境和生產(chǎn)環(huán)境公用的配置放入base中，不同的配置各自放入prod或dev文件中（例如：mode）

2. 然后在dev和prod中使用webpack-merge把自己的配置與base的配置進(jìn)行合并后導(dǎo)出

   npm i -D webpack-merge

3. 將package.json中的腳本參數(shù)進(jìn)行修改，通過--config手動指定特定的配置文件

定義環(huán)境變量

生產(chǎn)與開發(fā)環(huán)境的配置文件是不一樣的，但有時(shí)候會遇到一個(gè)需求：

在開發(fā)的時(shí)候有一個(gè)服務(wù)器，可能是本地的服務(wù)器或者內(nèi)網(wǎng)地址，當(dāng)上線的時(shí)候不能再是這個(gè)地址，需要修改，希望可以自動切換。

除了區(qū)分不同的配置文件進(jìn)行打包，還需要在開發(fā)時(shí)知道當(dāng)前的環(huán)境是開發(fā)階段或上線階段，所以可以借助內(nèi)置插件DefinePlugin來定義環(huán)境變量。最終可以實(shí)現(xiàn)開發(fā)階段與上線階段的api地址自動切換。

1. 引入webpack

   const webpack = require('webpack')
   

2. 創(chuàng)建插件對象，并定義環(huán)境變量，在開發(fā)和生產(chǎn)配置文件分別定義IS_DEV 為true和false

   new webpack.DefinePlugin({
     IS_DEV: 'false'//如果是字符串'"張三"',此處會解析字符串
   })
   

3. 在打包的代碼環(huán)境下可以直接使用命令切換不同的地址
   圖片