在 Create-React-App 项目中配置 Webpack
-
什么是 React 中的
create-react-app
Webpack -
在 React 中找到
create-react-app
Webpack 配置和文件 -
在 React 中更改
create-react-app
的 Webpack 配置
JavaScript 捆绑器通过将单独的文件合并为一个来促进开发过程。对于初学者来说,捆绑器可能很难设置。
几年前,当 React 框架仍处于起步阶段时,社区被多个捆绑器分开。框架背后的团队决定停止这种划分并选择一个首选解决方案。他们选择的捆绑器是 webpack,但默认的对某些人不起作用。
什么是 React 中的 create-react-app
Webpack
React 有一个名为 create-react-app
的启动项目,用于构建应用程序。安装后,它会提供一个具有现有 webpack 配置的环境。
webpack 的设置过程有点复杂。如果你不知道自己在做什么,那么设置一个 webpack 将花费很长时间,而且它可能弊大于利。幸运的是,create-react-app
为你完成了所有这些工作。
在后台,create-react-app
会为你处理所有工具。这样,初学者和中级 React 开发人员可以专注于编写代码,而不是复杂的设置过程。
在 React 中找到 create-react-app
Webpack 配置和文件
设置完成后,create-react-app
项目的文件夹包含许多其他文件夹。除非你知道去哪里寻找,否则很难找到 webpack 的配置文件。
作为第一步,你应该打开 package.json
文件。在这里你可以找到有关应用程序上使用的依赖项和工具的信息。
打开文件后,向下滚动到 'scripts': {}
对象。你可能会注意到 create-react-app
使用了一个名为 react-scripts
的库。
要找到 webpack 的配置文件,你应该转到 node-modules
文件夹并找到 react-scripts
目录。根据库的版本,你应该找到 config
文件夹;此文件夹包含所有配置文件,包括用于 webpack 的配置文件。
在 React 中更改 create-react-app
的 Webpack 配置
默认 webpack 配置的唯一缺点是它做了很多假设。一些 React 开发人员想要更改 create-react-app
的默认 webpack 配置。
默认情况下,启动项目在内部处理外部模块和库,因此 package.json
文件看起来很干净。
此默认行为很有用,但有时最好显示有关模块的完整信息。这就是 npm run eject
的用武之地。
如果你运行这个命令,关于你所有模块的信息将在 package.json
中可用。运行此命令是编辑应用程序的 webpack 配置所必需的。
除非你知道自己在做什么,否则运行 npm run eject
可能会有很大风险。但是,可以在不弹出应用程序的情况下更改应用程序的 webpack 配置。
为此,你可以使用名为 react-app-rewired
的库。要获取有关该库的更多信息,请阅读官方文档。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn