提取index.html,React JS index.js文件如何联系index.html以获取ID引用？

小编典典

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 code:

paths.appIndexJs,

],

plugins: [

// Generates an `index.html` file with the

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

new HtmlWebpackPlugin(

Object.assign(

{},

{

inject: true,

template: paths.appHtml,

},

路径文件代码有一些更新

module.exports = {

...

appHtml: resolveApp('public/index.html'),

appIndexJs: resolveModule(resolveApp, 'src/index'),

...

};

2020-07-22