1. 簡單了解
開發環境和生產環境的構建目標差異很大。在開發環境中,我們需要具有強大的、具有實時重新加載或熱模塊替換能力 和 localhost server。而在生產環境中,我們的目標則轉向於關注更小的 bundle,以及資源的優化,以改善加載時間。所以我們通常建議為每個環境編寫彼此獨立的 webpack 配置。
2. 安裝
npm install --save-dev webpack-merge
3. 配置
(1) .拆分文件
在這里我們可以將webpack.config.js拆分為三個文件,分別是webpack.common.conf.js、webpack.dev.conf.js和webpack.prod.conf.js。
webpack.common.conf.js是放一些我們公用的配置,比如入口entry、出口output、常用loader以及插件等。
webpack.dev.conf.js是在開發環境上的配置,比如devServer配置、模塊熱替換等方便開發的配置
webpack.prod.conf.js是在生產環境上的配置,比如提取分離css、壓縮css和js等
webpack.common.conf.js
Webpack.dev.conf.js
Webpack.prod.conf.js