區分生產環境和開發環境的配置


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM