为什么捆绑.js没有加载到其他路线上？

Question

我在webpack.common.js文件中使用webpack3加载我的bundle.js和输出。

当我使用React前端碰到"/'路线"时，这可以正常工作。我的React路由器工作正常，并且根据需要更改URL的预期在应用程序周围导航。

但是，当我用不是'/'bundle.js的URL重新加载浏览器时，不会自动注入。

作为围绕的工作，我将脚本标签放在index.html模板中引用bundle.js。这可以解决其他路线上的问题。

但是...这意味着捆绑包在"/"路线上加载两次。通过由WebPack注入以及脚本标签。

我该如何制作它，以便bundle.js即使在重新加载上也会在所有路线上注入，或者如何将脚本标签保留在模板中，以防止WebPack 3自动注入bundle.js？

  entry: {
    app: './client/src/index.jsx',
   },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname + '/dist'),
    publicPath: '/'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Shopping',
      template: './index.html',
    }),

该项目正在使用Rectrouter 4，从浏览器到服务器的每个呼叫都命中此路线：

app.get('*', (req,res) =>{
  res.sendFile(path.resolve(__dirname, '../index.html'))
});

Answer 1

我在这里找到了一个解决方案https://stackoverflow.com/a/a/43704661/5086349。我在模板中保留了引用捆绑包的标签，然后设置了束注入。

<script type="text/javascript" src="/app.bundle.js"></script>

对WebPack Common进行了很小的更改。

output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname + '/dist'),
    publicPath: '/'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({

      // Set inject to false. 
      inject: false,

      title: 'Shopping',
      template: './index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ServiceWorkerWebpackPlugin({
      entry: path.join(__dirname, './client/components/user/sw.js'),
    }),
  ],