Development / Production不同配置文件打包
項目開發(fā)時一般需要使用兩套配置文件，用于開發(fā)階段打包（不壓縮代碼绘面，不優(yōu)化代碼冗懦，增加效率）和上線階段打包（壓縮代碼篡九，優(yōu)化代碼拭卿，打包后直接上線使用）
抽取三個配置文件：
webpack.base.js
webpack.prod.js
webpack.dev.js
步驟如下：
將開發(fā)環(huán)境和生產(chǎn)環(huán)境公用的配置放入base中，不同的配置各自放入prod或dev文件中（例如：mode）
-
然后在dev和prod中使用
webpack-merge把自己的配置與base的配置進(jìn)行合并后導(dǎo)出npm i -D webpack-merge 將package.json中的腳本參數(shù)進(jìn)行修改充石，通過
--config手動指定特定的配置文件
定義環(huán)境變量
生產(chǎn)與開發(fā)環(huán)境的配置文件是不一樣的莫换，但有時候會遇到一個需求：
在開發(fā)的時候有一個服務(wù)器，可能是本地的服務(wù)器或者內(nèi)網(wǎng)地址骤铃，當(dāng)上線的時候不能再是這個地址拉岁，需要修改，希望可以自動切換惰爬。
除了區(qū)分不同的配置文件進(jìn)行打包喊暖，還需要在開發(fā)時知道當(dāng)前的環(huán)境是開發(fā)階段或上線階段，所以可以借助內(nèi)置插件DefinePlugin來定義環(huán)境變量撕瞧。最終可以實現(xiàn)開發(fā)階段與上線階段的api地址自動切換陵叽。
-
引入webpack
const webpack = require('webpack') -
創(chuàng)建插件對象，并定義環(huán)境變量丛版，在開發(fā)和生產(chǎn)配置文件分別定義IS_DEV 為true和false
new webpack.DefinePlugin({ IS_DEV: 'false'//如果是字符串'"張三"',此處會解析字符串 }) 在打包的代碼環(huán)境下可以直接使用命令切換不同的地址
圖片
