Question

我正在构建ReactJS应用程序，需要添加<script>标签。我可以在index.html中正确执行此操作，但这不能解决我的问题，因为：

必须在关闭</body>之前立即注入所有脚本。
我的额外<script>标签必须在生成包后添加。

可以采用什么解决方案来实现这一目标？

这是我的Webpack配置的一部分：

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

module.exports = {
  entry: {
      app: [
          './src/main.jsx',
      ],
  },
  output: {
      path: path.resolve(__dirname, 'build'),
      filename: '[name].[hash].js',
      chunkFilename: '[name].[hash].js',
      publicPath: '/',
  },

  plugins: [
      new HtmlWebpackPlugin({
          title: 'App name',
          description: 'App description',
          template: './public/index.html',
          inject: true,
      }),
  ],
}

还有index.html：

<!doctype html>
<html lang="fi">
  <head>
      <meta charset="utf-8">
      <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
      <div id="app"></div>
      <!-- generated bundle will be injected here -->
      <!-- I need my extra script tags injected here -->
  </body>
</html>

其他脚本不能异步加载。

谢谢！

Answer 1

我建议通过javascript将其添加到组件中，因为React在阻止脚本正常执行方面做得很好。例如，在app.js上的componentDidMount函数中

dd/mm/yyyy

Answer 2

@James Morrison给出的答案效果很好，我下次会使用这种方法，但是它不能解决我当前的问题。我最终在body内手动注入了生成的包和CSS：

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>

和head：

<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
    <link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>

webpack配置中的inject选项也设置为false：

plugins: [
  new HtmlWebpackPlugin({
      title: 'App name',
      description: 'App description',
      template: './public/index.html',
      inject: false,
  }),
],

在ReactJS应用程序中生成包后注入脚本标签

2 个答案: