Script imports in preprocessor templates are resolved relative to the including file #112
Replies: 1 comment
-
|
Hello @gingershaped, thanks for the issue. All resources, including scripts, are resolved relative to entrypoint template. Why?The plugin uses various templating engines and not all engines supports the feature to allow walk through source template includings to resolve assets in child partials. How works resolving of assets?To resolve assets in all templating engines with the same rule, firstly the template entry point (including all partials) is rendered into pure HTML and then in the HTML (the path to entry template) will be resolved assets. Therefore all relative paths in partials must be relative to entry point, not to self partials. The same behaviour works in html-loader. Additional, only at this stage can be implement the source filter like it works in html-loader. Solutionindependent of using templating engine I strongly recommend to use the Webpack aliases for your assets. This is bests practice and simplify using assests in templates. Define aliases in config: const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
resolve: {
alias: {
'@scripts': path.join(__dirname, 'src/scripts/'), // alias to scripts used in template
'@styles': path.join(__dirname, 'src/scss/'), // alias to styles used in template
'@images': path.join(__dirname, 'src/images/'), // alias to images used in template
},
},
plugins: [
new HtmlBundlerPlugin({
entry: {
index: "src/index/index.hbs"
},
preprocessor: "handlebars",
preprocessorOptions: {
partials: ["src/templates/"]
}
})
]
};Use aliases in the template: <html>
<head>
<link href="@styles/main.scss" rel="stylesheet" />
<script src="@scripts/main.ts" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<img src="@images/picture.png" />
</body>
</html>P.S.I'm sorry, but your feature request can't be implemented. Use please the working solution. |
Beta Was this translation helpful? Give feedback.
-
Current behaviour
In templates which are included in another file (such as by using Handlebars partials),
<script>tags in the template will have theirsrcpaths resolved relative to the file which included them.Expected behaviour
The
srcshould be resolved relative to the template file itself.Reproduction
https://github.com/gingershaped/template-script-import-mre
Environment
Beta Was this translation helpful? Give feedback.
All reactions