config-overrides配置outputDir
时间: 2023-12-10 21:02:52 浏览: 15
config-overrides.js 是一个自定义的配置文件,用于覆盖 Create React App 的默认配置。如果你想要修改输出目录,可以在 config-overrides.js 中添加以下代码:
```js
const path = require('path');
module.exports = function override(config, env) {
// 修改输出目录为dist
config.output.path = path.join(__dirname, 'dist');
return config;
}
```
这里使用 Node.js 的 `path` 模块来获取新的输出目录,然后将其赋值给 `config.output.path` 属性。这样,运行 `npm run build` 命令时,打包后的文件将会输出到 dist 目录下。
相关问题
config-overrides配置静态资源访问路径
config-overrides.js 文件可以用于覆盖 Create React App 的默认配置。如果要配置静态资源访问路径,可以在 config-overrides.js 文件中添加如下内容:
```javascript
const path = require('path');
module.exports = function override(config, env) {
// 修改 publicPath
config.output.publicPath = '/your-custom-path/';
// 修改 file-loader 配置
const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
fileLoaderRule.exclude = path.resolve(__dirname, 'src/assets/svg');
const svgSpriteLoaderRule = {
test: /\.svg$/,
include: path.resolve(__dirname, 'src/assets/svg'),
use: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: 'icon-[name]'
}
}
]
};
config.module.rules.unshift(svgSpriteLoaderRule);
return config;
};
```
其中,`config.output.publicPath` 可以配置静态资源访问路径,如 `/your-custom-path/`。
另外,如果你使用了 svg-sprite-loader 来处理 SVG 图标,还需要修改 file-loader 的配置,将 SVG 图标目录排除在外,并添加 svg-sprite-loader 的配置,具体代码可以参考上述例子。
config-overrides
config-overrides是一个用于修改Create React App (CRA)配置的文件。它允许你在不eject(暴露配置)的情况下,对CRA的默认配置进行自定义。通过config-overrides文件,你可以添加、删除和修改CRA的Webpack配置。
你可以使用config-overrides来修改webpack配置、添加自定义loader和plugin、修改babel配置等。这样可以更灵活地定制CRA项目的构建过程,满足特定的需求。
在使用config-overrides之前,你需要安装customize-cra这个包。然后,在项目根目录下创建一个config-overrides.js文件,并在其中编写相应的配置。
例如,你可以使用config-overrides来修改webpack配置,如下所示:
```javascript
const path = require('path');
module.exports = function override(config, env) {
// 修改output路径
config.output.path = path.join(__dirname, 'dist');
// 添加一个自定义loader
config.module.rules.push({
test: /\.txt$/,
use: 'raw-loader'
});
// 修改babel配置,支持装饰器语法
config = injectBabelPlugin(
['@babel/plugin-proposal-decorators', { legacy: true }],
config
);
return config;
};
```
以上示例中,我们修改了output的路径为项目根目录下的dist文件夹,并添加了一个处理txt文件的自定义loader。同时,我们还通过injectBabelPlugin函数将装饰器语法支持添加到了babel配置中。
这只是config-overrides的一个简单示例,你可以根据具体需求进行配置。使用config-overrides可以轻松地对Create React App进行个性化定制,而无需eject项目。