React静态页面构建:如何用react-app-rewired避免代码压缩?

React静态页面构建:如何用react-app-rewired避免代码压缩?

使用react-app-rewired构建静态react页面并保留源码可读性

许多开发者在交付基于React构建的静态页面给客户时,希望客户能够直接修改源码,而无需重新编译。本文将介绍如何利用react-app-rewired避免代码压缩,从而简化客户的维护工作。

直接提供源码是最便捷的方案,客户修改后只需自行编译即可。但如果出于安全或其他考虑,开发者不希望直接提供源码,则可以通过调整webpack配置来实现。

关键在于修改Webpack的optimization.minimize属性。将其设置为false,即可阻止Webpack在打包过程中压缩代码,从而保留源码的可读性和易修改性。 这需要修改react-app-rewired的配置文件,例如config-overrides.JS

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

通过以上简单的配置修改,使用react-app-rewired打包后的静态页面将保留未压缩的源码,方便客户直接修改和维护。

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享