javascript - HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths -
i using webpack , htmlwebpackplugin inject bundled js , css html template file.
new htmlwebpackplugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), and produces following html file.
<!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> this works fine when visiting root of app localhost:3000/, fails when try visit app url, example, localhost:3000/items/1 because bundled files not injected absolute path. when html file loaded, js file inside non-exist /items directory because react-router hasn't loaded yet.
how can htmlwebpackplugin inject files absolute path, express them @ root of /dist directory , not @ /dist/items/main-...min.js? or maybe can change express server work around issue?
app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendfile(path.join(__dirname, '../dist/index.html')); }); essentially, need line:
<script src="main...js"></script> to have slash @ start of source.
<script src="/main...js></script>
try setting publicpath in webpack config:
output.publicpath = '/' htmlwebpackplugin use publicpath prepend urls of injects.
another option set base href in <head> of html template, specify base url of relative urls in document.
<base href="http://localhost:3000/">
Comments
Post a Comment