Create-React-App有一个非常有趣的设置。
我开始挖掘
package.jsonnpm脚本
start
“ start”：“反应脚本开始”
这将带我进入他们的二进制文件
react-scripts，
node_modules/.bin
我将在此处发布相关内容。
switch (script) { case 'build': case 'eject': case 'start': case 'test': { const result = spawn.sync( 'node', [require.resolve('../scripts/' + script)].concat(args), { stdio: 'inherit' } );因此，这告诉我他们正在
../scripts/文件夹中寻找脚本。
因此，自从我开始执行操作以来，我去了react-scripts npm module（
node_modules/react-scripts）并打开了
node_modules/react-scripts/scripts/start.js文件
npm start。
现在，这里是我正在寻找的webpack配置的地方。
他们专门指的是
node_modules/react-scripts/config/webpack.config.dev.js。我将在此处发布相关内容。
entry: [ // Finally, this is your app's pre: paths.appIndexJs,],plugins: [ // Generates an `index.html` file with the <script> injected. new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, }),因此，所引用的
paths.appIndexJs文件是webpack配置中的入口文件。
他们正在使用HtmlWebpackPlugin在路径上加载html
paths.appHtml。
最后一个难题是将其链接回您发布的文件。从发布相关内容
paths.js
const appDirectory = fs.realpathSync(process.cwd());const resolveApp = relativePath => path.resolve(appDirectory, relativePath);module.exports = { ... appHtml: resolveApp('public/index.html'), appIndexJs: resolveApp('src/index.js'), ...}因此，在您的应用程序目录中，
appHtml是文件
public/index.html
appIndexJs是文件
src/index.js
您的两个文件有问题。
哇！那是一段漫长的旅程..：P
更新1- 截至
react-scripts@3.x
下面的
react-scripts二进制文件
node_modules/.bin更改了以下逻辑。本质上是在做同样的事情。
if (['build', 'eject', 'start', 'test'].includes(script)) { const result = spawn.sync( 'node', nodeArgs .concat(require.resolve('../scripts/' + script)) .concat(args.slice(scriptIndex + 1)), { stdio: 'inherit' } );用于dev＆prod的webpack配置已合并为一个。
const configFactory = require('../config/webpack.config');HTMLWebpackPlugin配置看起来像这样-这是因为他们必须在此之上有条件地添加生产配置
plugins: [ // Generates an `index.html` file with the <script> injected. new HtmlWebpackPlugin( Object.assign( {}, { inject: true, template: paths.appHtml, },路径文件代码有一些更新
module.exports = { ... appHtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'), ...};
