create-react-app搭建react开发环境中的public/index.html.

发布于 2022-09-06 00:39:48 字数 713 浏览 18 评论 0

使用create-react-app创建一个简单的react项目,会在项目的根目录下生成一个入口文件index.js,其内容大致如下:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

上述代码中,document.getElementById("root")这句就是把根组件挂载在根页面中,该页面位于项目的根目录public/index.html,其内容大致如下:

<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>

上述代码中,<div id="root"></div>和document.getElementById("root")相对应.
我的问题是,在开发环境下没有打包文件的情况下,index.js中的document.getElementById("root")是如何能够关联到另一个目录public/index.html文件呢,这两者之间好像没有引用关系.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

药祭#氼 2022-09-13 00:39:48

create-react-app采用一个react-scripts这个库，你的问题回答很简单，看看源码就知道了。react-scripts包里面的config文件里面有一个webpack.config.dev.js这个webpack配置文件，从配置文件中可以清楚看到下面这段代码。

 new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
    }),

其中这个paths对应的文件就是同级目录下paths.js这个文件，怎么得到来的？webpack.config.dev.js有一行代码写的很清楚。

const paths = require('./paths');

而paths.js这个文件中，很清楚可以看到appHtml对应的正是public/index.html文件。源码是个好东西，多看看！

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  // These properties only exist before ejecting:
  ownPath: resolveOwn('.'),
  ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
};

回复收藏 0