const rewire = require('rewire');
const path = require('path');
// Pointing to file which we want to re-wire — this is original build script
const defaults = rewire('react-scripts/scripts/build.js');
// Getting configuration from original build script
let config = defaults.__get__('config');
// If we want to move build result into a different folder, we can do that!
// Please note: that should be an absolute path!
config.output.path = path.join(path.dirname(__dirname), 'custom/target/folder');
// If we want to rename resulting bundle file to not have hashes, we can do that!
config.output.filename = 'custom-bundle-name.js';
// And the last thing: disabling splitting
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
config.optimization.runtimeChunk = false;
6条答案
按热度按时间thtygnil1#
这可以通过使用
react-app-rewired
包扩展您的CRA来完成,该包允许您修改webpack配置。移除生成文件名中的哈希所需的更改。
1.安装react-app-rewired
npm install react-app-rewired --save-dev
1.创建
config-overrides.js
文件在你的根文件夹(其中package.json
是)1.将以下代码放入
config-overrides.js
文件。它保留所有CRA设置,仅删除文件名中的哈希部分。1.使用新配置。在
scripts
部分的package.json
文件中,将"build": "react-scripts build",
替换为"build": "react-app-rewired build",
除非您要更改更多配置,否则只需在
build
中使用react-app-rewired
即可,否则请在除eject
之外的其他脚本中将react-scripts
替换为react-app-rewired
mtb9vblg2#
我发现你可以通过设置
splitChunks
webpack配置来禁用分块https://github.com/facebook/create-react-app/issues/5306#issuecomment-431431877但是,这不会从包名称中删除
contenthash
部分,名称中仍然会有该随机字符串。要删除此包,请转到您的
webpack.config
并编辑包名称'static/js/[name].[contenthash:8].js'
=〉'static/js/[name].js'
2nbm6dog3#
这是Darko的答案的扩展和改进版本。我创建它主要是为了保存时间,为其他人谁是不完全满意的解决方案中提到的评论,并没有耐心挖掘到这个评论,解决了这个问题,在更好的方式。
这种“hacky”方法的主要思想是动态重写标准
react-scripts
的webpack
配置,并将其注入到原始脚本中。为此,您需要从
npmjs.org
安装rewire
包,如下所示:然后创建单独的构建脚本,该脚本将“ Package ”原始
react build
脚本,并确保它将释放正确的webpack
配置。传统的方法是将此文件保存在./scripts
文件夹中。因此,我们将其命名为./scripts/build.js
。它的内容如下:然后,我们应该使用这个构建脚本,而不是
packages.json
中的标准脚本,如下所示:chy5wohz4#
正如其他人指出的,你可以用
react-app-rewired
来代替弹出。下面是一个同样处理css和媒体文件的版本:安装
npm install react-app-rewired --save-dev
后,我创建了一个包含以下内容的config-overrides.js
:polhcujo5#
我不知道如何关闭分块,但你可以做些什么来实现你的目标
更新为最新的react和react-dom,运行“yarn react@next react-dom@next”(或执行相同操作的npm命令)
现在你应该有了最新的react版本--这样你就可以使用React.lazy/React.Suspense进行代码分割,使用钩子等等。
所以现在你可以用(下面的组件或依赖示例)来命名你的块
如果你在使用导入语法时遇到错误,你需要使用babel-plugin-syntax-dynamic-import插件,把“babel”字段放到你的包json中。
现在你可以命名你的代码块并实现最新的代码分割方法了--希望能有所帮助。这里有一个React. lazyReact. Suspence-https://reactjs.org/blog/2018/10/23/react-v-16-6.html的链接
qnyhuwrf6#
有一种无需 * 弹出 * 的黑客攻击:
yarn add --dev rewire
1.在根目录下创建文件并将其命名为
build-non-split.js
1.填写以下代码:
1.将
package.json
中的构建脚本更改为:yarn build