React靜態(tài)頁面構(gòu)建：如何用react-app-rewired避免代碼壓縮？

使用react-app-rewired構(gòu)建靜態(tài)react頁面并保留源碼可讀性

許多開發(fā)者在交付基于React構(gòu)建的靜態(tài)頁面給客戶時，希望客戶能夠直接修改源碼，而無需重新編譯。本文將介紹如何利用react-app-rewired避免代碼壓縮，從而簡化客戶的維護工作。

直接提供源碼是最便捷的方案，客戶修改后只需自行編譯即可。但如果出于安全或其他考慮，開發(fā)者不希望直接提供源碼，則可以通過調(diào)整webpack配置來實現(xiàn)。

關(guān)鍵在于修改Webpack的optimization.minimize屬性。將其設(shè)置為false，即可阻止Webpack在打包過程中壓縮代碼，從而保留源碼的可讀性和易修改性。 這需要修改react-app-rewired的配置文件，例如config-overrides.JS：

module.exports = function override(config, env) {   config.optimization.minimize = false;   return config; };

通過以上簡單的配置修改，使用react-app-rewired打包后的靜態(tài)頁面將保留未壓縮的源碼，方便客戶直接修改和維護。