使用Create-React-App,是否可以像在grunt / gulp中那样在构建过程中将代码注入/替换/追加到index.html文件中?

问题描述 投票:0回答:1

Create-react-app在build文件夹中创建一个index.html文件,我已经对其进行了精细化处理,以将其重命名为index.aspx (in package.json - "build": "react-scripts build && mv build/index.html build/index.aspx",),因为我需要该应用程序在我们服务器上的模板中运行-做。但是,我目前必须在新index.aspx文件中的<%@ Page language="c#" CodeBehind="index_fw2.aspx.cs" AutoEventWireup="false" Inherits="IMod.Web.V2.Index" %>之前加上<!doctype html>,以便模板在我们的服务器上呈现。

无论如何,我是否可以通过create-react-app将其注入到新重命名的index.aspx文件中,或者甚至在将它从index.html重命名之前注入在构建过程中?我到处都在寻找参考。

TIA!

asp.net reactjs create-react-app build-process code-injection
1个回答
0
投票

您可以使用webpack将所需内容插入html文件中。在当前示例中,我正在使用html-webpack-plugin

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ....
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Path to your index file
      some_variable: '<%@ Page language="c#" CodeBehind="index_fw2.aspx.cs" AutoEventWireup="false" Inherits="IMod.Web.V2.Index" %>', // 
    }),
  ],
};

然后将模板变量插入到index.html文件中:

<%= htmlWebpackPlugin.options.some_variable %>
<!DOCTYPE html>
   <html>
   ....

运行构建脚本后,Webpack将用配置文件中定义的模板变量替换模板变量。

© www.soinside.com 2019 - 2024. All rights reserved.