react webpack配置 paths.js

'use strict';const path = require('path');
const fs = require('fs');
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');//项目根目录
const appDirectory = fs.realpathSync(process.cwd());
//生成绝对路径
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);// 应用程序的公共路径。
//所有资源的公共访问:/
const publicUrlOrPath = getPublicUrlOrPath(process.env.NODE_ENV === 'development',require(resolveApp('package.json')).homepage,process.env.PUBLIC_URL
);
//定义扩展名，这些扩展名会被react解析
const moduleFileExtensions = ['web.mjs','mjs','web.js','js','web.ts','ts','web.tsx','tsx','json','web.jsx','jsx',
];// 解析模块的方法
const resolveModule = (resolveFn, filePath) => {const extension = moduleFileExtensions.find(extension =>fs.existsSync(resolveFn(`${filePath}.${extension}`)));if (extension) {return resolveFn(`${filePath}.${extension}`);}return resolveFn(`${filePath}.js`);
};// 向外导出各种路径
module.exports = {dotenv: resolveApp('.env'),appPath: resolveApp('.'),appBuild: resolveApp('build'),appPublic: resolveApp('public'),appHtml: resolveApp('public/index.html'),appIndexJs: resolveModule(resolveApp, 'src/index'),appPackageJson: resolveApp('package.json'),appSrc: resolveApp('src'),appTsConfig: resolveApp('tsconfig.json'),appJsConfig: resolveApp('jsconfig.json'),yarnLockFile: resolveApp('yarn.lock'),testsSetup: resolveModule(resolveApp, 'src/setupTests'),proxySetup: resolveApp('src/setupProxy.js'),appNodeModules: resolveApp('node_modules'),publicUrlOrPath,
};module.exports.moduleFileExtensions = moduleFileExtensions;

react webpack配置 paths.js相关推荐

react webpack配置
react webpack配置接上期 webpack的基础配置同样附上个人git仓库地址:https://gitee.com/zhaosir1/webpack-base-react-cli.git ...
Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
react webpack配置组件路径引用 @与自定义
暴露配置文件: create-react-app 生成的项目看不到 webpack 相关的配置文件,需要先暴露出来,使用如下命令 npm run eject 修改配置文件: webpack.confi ...
react修改webpack配置，添加别名
第一种方式通过 npm run eject 直接暴露出来react所有的webpack配置文件,暴露出来之后,过程不可逆而且失去了 react-scripts 的统一管理的好处,而且react的w ...
React 不用eject下修改webpack配置实现alisa
使用 customize-cra 和 react-app-rewired 对React项目进行webpack配置的注入 yarn add customize-cra react-app-rewired ...
使用webpack配置react并添加到flask应用
学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发. 首先要明确一个概念:react的文件必须经过编译才能被 ...
修改webpack配置，在react中使用less
LESS是一个CSS预处理器,比如antD就是基于LESS的. 要在react中使用LESS,需要暴露webpack配置并进行修改,同时安装less和less-loader. 当然网上可以找到很多教程 ...
js webpack 配置路径_vue使用webpack配置路径别名
原始的文件引用方式的缺点要拼写一个巨长无比的字符串,而且每引用一次都要拼写一次. 如果这个文件位置变了,我就要把所有引用它的文件都修改一次. 下面介绍一种很优雅的方式,使用webpack的resolv ...
vue 配置【详解】 vue.config.js （含 webpack 配置）
目录常用配置完整配置使用 vue-cli 3.x 以上的脚手架创建的 vue 项目不再有 build文件夹,若需要进行相关配置,需在项目目录下新建文件 vue.config.js 常用配置 // ...

react webpack配置 paths.js

react webpack配置 paths.js相关推荐

最新文章

热门文章