首页 > 其他分享 >React Webpack copy文件到build路径

React Webpack copy文件到build路径

时间:2022-12-01 10:23:26浏览次数:49  
标签:const app webpack React Webpack build copy config

目的:webpack打包时将资源文件copy到指定路径

1:安装依赖copy-webpack-plugin、customize-cra、react-app-rewired

2:修改script,使用react-app-rewired命令

"build:copy": "cross-env NODE_ENV=production GENERATE_SOURCEMAP=false react-app-rewired --max-old-space-size=8192 build",

3:配置config-overrides.js

const { override, fixBabelImports } = require('customize-cra');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const copyFileConfig= ()=>(config, env)=>{
	config.plugins.push(
		new CopyWebpackPlugin(
		[
		  {
			from: 'assets/sample.csv',
			to: 'assets/sample.csv'
		  }
		])
	  );
	
    return config;
}

module.exports = override(
copyFileConfig(),
//这里是antd的示例,与本主题无关
fixBabelImports('import', {
		libraryName: 'antd',
		libraryDirectory: 'es',
		style: 'css',
	}),
);

4:打包时执行npm run build:copy即可

标签:const,app,webpack,React,Webpack,build,copy,config
From: https://www.cnblogs.com/Andy1982/p/16940564.html

相关文章

  • unity RPG Builder v1.1.0.8 插件分享
    仅供学习使用 一款制作RPG游戏的插件,提供了所有RPG游戏的功能包含技能,锻造,强化,任务,对话,背包等让开发者可以简单地点点点实现创造新的装备,怪物,NPC等功能有兴趣的小伙......
  • React useRef
    useRef应用场景:绑在DOM上,绑在组件上,保存临时变量永远不丢失举个栗子importReact,{useState,useRef}from'react'exportdefaultfunctionApp(){const[......
  • React Server Component: 混合式擦染
    ReactServerComponent:混合式擦染原创字节跳动终端技术工作日志前天16:29阅读数20本文被收录于专区大前端进入专区参与更多专题讨论 ......
  • React 生命周期
    本文基于react18当组件实例被创建并插入DOM中时,其生命周期调用顺序如下constructor构造getDerivedStateFromProps从props中获取staterender渲染componentDi......
  • 第五章、react高级
    目录十一、AntDesign组件库1、react中添加class-使用第三方库classnames2、antdesign简介3、认识craco4、自定义主题5、配置别名6、案例十二、axios库的使用1、axios的基本......
  • xcodebuild和xcrun实现自动打包iOS应用程序
    随着苹果手持设备用户的不断增加,ios应用也增长迅速,同时随着iphone被越狱越来越多的app的渠道也不断增多,为各个渠道打包成了一件费时费力的工作,本文提供一种比较智能的打包......
  • 如何在NetSuite中使用状态步骤条 Share how to use Step Bar in NetSuite build-in UI
    背景及应用场景我们在使用NetSuite中的状态字段时(无论是系统的状态字段还是自定义的字段),经常会遇到状态之间的步骤性,有的流程对状态步骤有特定的需求(比如满足什么条件才......
  • Angular 如何修改webpack配置(配置loader)
    1.修改AngularCLIwebpack配置1.1安装@angular-builders/custom-webpacknpminstall-D@angular-builders/custom-webpack1.2新建webpack配置文件extra-webpac......
  • 2022最全Hbuilder打包成苹果IOS-App的详解
     本文相关主要记录一下使用Hbuilder打包成苹果IOS-App的详细步骤。介绍一下个人开发者账号:再说下什么是免费的苹果开发者账号,就是你没交688年费的就是免费账号,如果你......
  • React学习笔记,文档中的大部分代码都有注释
    React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTMLDOM元素、也可以传递动态变量、甚至是可交互的应用组件。1.使用(......