我用create-react-app包创建了一个ReactJS项目,工作得很好,但我找不到webpack文件和配置。
react-create-app如何与webpack一起工作?webpack配置文件位于create-react-app的默认安装中的哪里?我无法在项目文件夹中找到配置文件。
我没有创建覆盖配置文件。我可以用其他文章管理配置设置,但我想找到传统的配置文件。
我用create-react-app包创建了一个ReactJS项目,工作得很好,但我找不到webpack文件和配置。
react-create-app如何与webpack一起工作?webpack配置文件位于create-react-app的默认安装中的哪里?我无法在项目文件夹中找到配置文件。
我没有创建覆盖配置文件。我可以用其他文章管理配置设置,但我想找到传统的配置文件。
当前回答
这些文件位于你的node_modules/react-scripts文件夹中:
Webpack配置:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js
启动脚本:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js
构建脚本:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js
测试脚本:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js
等等……
CRA的目的不是担心这些。
从文档中可以看到:
你不需要安装或配置Webpack或Babel之类的工具。 它们是预配置和隐藏的,以便您可以专注于代码。
如果你想要访问配置文件,你需要通过运行以下命令来弹出:
npm run eject
注意:这是一个单向操作。一旦弹射出去,就回不去了!
在大多数情况下,最好不要弹出,试着找到另一种方式让它为你工作。
如果需要重写一些配置选项,可以查看https://github.com/gsoft-inc/craco
其他回答
这些文件位于你的node_modules/react-scripts文件夹中:
Webpack配置:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js
启动脚本:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js
构建脚本:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js
测试脚本:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js
等等……
CRA的目的不是担心这些。
从文档中可以看到:
你不需要安装或配置Webpack或Babel之类的工具。 它们是预配置和隐藏的,以便您可以专注于代码。
如果你想要访问配置文件,你需要通过运行以下命令来弹出:
npm run eject
注意:这是一个单向操作。一旦弹射出去,就回不去了!
在大多数情况下,最好不要弹出,试着找到另一种方式让它为你工作。
如果需要重写一些配置选项,可以查看https://github.com/gsoft-inc/craco
如果你想找到webpack文件和配置,去你的包。Json文件,并寻找脚本
你会发现scripts对象正在使用一个react-scripts库
现在转到node_modules,查找react-script-in-node-modules文件夹中的react-scripts
这个react-scripts/scripts和react-scripts/config文件夹包含了所有的webpack配置。
我正在使用craco的create-react-app,当我用craco.config.js更新到webpack 5时,我能够覆盖我的webpack配置:
module.exports = {
style: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
webpack: {
configure: (webpackConfig, { env, paths }) => {
// eslint-disable-next-line no-param-reassign
webpackConfig.resolve.fallback = {
fs: false,
};
return webpackConfig;
},
},
}
很多人来到这个页面的目的是寻找webpack配置和文件,以便将自己的配置添加到其中。另一种不运行npm run eject的方法是使用react-app-rewired。这允许你覆盖你的webpack配置文件而不弹出。
您可以在/config文件夹中找到它。
当你弹出时,你会收到这样的消息:
Adding /config/webpack.config.dev.js to the project
Adding /config/webpack.config.prod.js to the project