javascript html-webpack-plugin php - HtmlWebpackPlugin inserisce i relativi file di percorso che si interrompono durante il caricamento dei percorsi del sito Web non root




1 Answers

In effetti, ho dovuto mettere:

output.publicPath: './';

per farlo funzionare in un percorso non ROOT. Allo stesso tempo stavo iniettando:

   baseUrl: './'

in

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

Con entrambi i parametri impostati, ha funzionato come un fascino.

tutorial destination inject

Sto usando webpack e HtmlWebpackPlugin per iniettare js e css in un file template html.

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

E produce il seguente file html.

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="main-295c5189923694ec44ac.min.js"></script>
  </body>
</html>

Funziona bene quando si visita la root dell'app localhost:3000/ , ma fallisce quando provo a visitare l'app da un altro URL, ad esempio localhost:3000/items/1 perché i file in bundle non vengono iniettati con un percorso assoluto. Quando viene caricato il file html, cercherà il file js all'interno della directory inesistenti /items perché react-router non è ancora stato caricato.

Come posso ottenere HtmlWebpackPlugin per iniettare i file con un percorso assoluto, quindi express li cercherà nella directory radice della mia /dist directory e non in /dist/items/main-...min.js ? O forse posso cambiare il mio server express per aggirare il problema?

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

In sostanza, ho solo bisogno di ottenere la linea:

<script src="main...js"></script>

avere una barra all'inizio della sorgente.

<script src="/main...js></script>



Related