logo
down
shadow

webpack: use hash file name in html template


webpack: use hash file name in html template

By : Dinh Dong
Date : November 21 2020, 11:01 PM
should help you out The html-webpack-plugin lets you configure your own templating if you need to as described here: https://github.com/ampedandwired/html-webpack-plugin#writing-your-own-templates.
But your use case looks pretty straightforward so that you should not need that. The html-webpack-plugin already handles putting in script tags for you using the correct naming pattern. So you can just omit the script tag from your source index html file and let the plugin inserting them.
code :


Share : facebook icon twitter icon
how to find html file in ngDialog template with webpack?

how to find html file in ngDialog template with webpack?


By : Yann RC.
Date : March 29 2020, 07:55 AM
To fix the issue you can do It seems that it may be an bug in ngDialog, referenceing to this github question:https://github.com/likeastore/ngDialog/issues/390.
But you can get it to work by using the plain:true property.
code :
ngDialog.open({
   plain: true,
   template: require('src/req/edit/editOptions.html'),
   scope: $scope
Load knockout template from html file with webpack

Load knockout template from html file with webpack


By : James Bachelder
Date : March 29 2020, 07:55 AM
wish help you to fix your issue The html-loader plugin is indeed working. Why it wasn't working at first was that I registered knockout-template-loader in my webpack.config.js as the default loader for html files.
Looks like it is using that even if a specific loader is specified in the require.
html-webpack-plugin - How to insert webpack bundle.js without executing the EJS template

html-webpack-plugin - How to insert webpack bundle.js without executing the EJS template


By : sipl developer
Date : March 29 2020, 07:55 AM
wish helps you I ended up using a simple custom plugin with the information posted on one of the github issue.
code :
var fs = require("fs");
const path = require('path')

function UpdateBundleJsPlugin(options) {
    // Setup the plugin instance with options...
}

UpdateBundleJsPlugin.prototype.apply = function(compiler) {
    compiler.plugin("done", function(statsData) {
        const stats = statsData.toJson();

        if (!stats.errors.length) {
            const htmlFileName = "search.ejs";
            const html = fs.readFileSync(path.join('./views',htmlFileName), "utf8");

            // need to read the final js bundle file to replace in the distributed index.html file
            const asset = stats.assets[0];
            let htmlOutput = html.replace(/static\/.*bundle\.js/, 'static/'+asset.name);

            fs.writeFileSync(
                path.join('./views', htmlFileName),
                htmlOutput);
        }
    });
};

module.exports = UpdateBundleJsPlugin;
Webpack static file references in html template

Webpack static file references in html template


By : user3349082
Date : March 29 2020, 07:55 AM
I wish this help you It turns out that webpack completely ignores the static folder in a project unless explicitly told so. This have resulted in me adding the CopyWebpackPlugin to my prod/staging builds as follows:
code :
new CopyWebpackPlugin([
    {
        from: path.resolve(__dirname, '../static'),
        to: 'static',
        ignore: ['.*']
    }
])
Webpack-React with server-side-rendering: linking to css file in server template with hash name

Webpack-React with server-side-rendering: linking to css file in server template with hash name


By : nchamb
Date : March 29 2020, 07:55 AM
Any of those help I'm preparing a starter for react from scratch, here is the code: https://github.com/antondc/react-starter , It depends.
Step 1: Get the current asset name
code :
{
    "bundle_name": {
        "asset_kind": "/public/path/to/asset"
    }
}
// in your render code

const assets = require('<webpack-output-folder>/assets.json');

// ...

res.render('template', {
 scripts: [{src: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.js}` }],
 links: [{href: `${WEBPACK_PUBLIC_PATH}/${assets.myEntryPointName.css}` rel: 'stylesheet' }],
});

// in your template (example for pug)

// ...

each link in links
  link(rel=link.rel href=link.href)

// ...

each script in scripts
  script(src=script.src)

// ...
const assets = require('<webpack-output-folder>/assets.json');
const fs = require('fs');

const css = /assets\/[a-z0-9]*\.css/i;
const js = /assets\/[a-z0-9]*\.js/i;

fs.readFile('<yourhtml>.html', (err, data) => {

  // ... (error handling)

  const updatedCss = data.replace(css, assets.myEntryPointName.css);
  const updatedJs = updatedCss.replace(js, assets.myEntryPointName.js);

  fs.writeFile('<yourhtml>.html', updated, (err) => {

    // ... (error handling)

  });

});
shadow
Privacy Policy - Terms - Contact Us © soohba.com