Back

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

react-app-rewired 是一个使得用户能够自定义使用 Create React App 创建的 React 应用的插件。本文将介绍如何在 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

©2017-2021 Copyright kindem.xyz / 湘ICP备17018771号-1
Built with Hugo
Theme Stack designed by Jimmy