在 react-app-rewired 中使用 uglify.js

🤔 起因

今天遇到一个玄学的 bug，主要是因为引入了 pinyin 包，这个包其中的一行代码会导致 Webpack 默认使用的 Minifier 失效，从而导致编译失败。

经过一份排查和寻求帮助，我发现可以通过在 Webpack 中引入 uglifyjs 这一插件来解决。

但是我使用的是 create-react-app 创建的 React 项目，这样一来 Webpack 的配置将会被隐藏，需要使用 react-app-rewired 来暴露位于 node_modules 目录下的 Webpack 配置，但是网上并没有找到关于在 react-app-rewired 中添加 uglifyjs 插件的方法。

🎉 解决办法

在 npm 上搜寻了一番，找到了一个宝贝 – react-app-rewire-uglifyjs，通过这个包可以直接在 react-app-rewired 中使用 uglifyjs，使用方法如下：

在 react-app-rewired 的配置文件 /config-overrides.js 这样写：

const rewireUglifyjs = require('react-app-rewire-uglifyjs');

module.exports = function override(config, env) {
    // use UglifyJS
    config = rewireUglifyjs(config);

    return config;
};

文档可以参考这里：npm - react-app-rewire-uglifyjs