logo
down
shadow

Using the same template file with HtmlWebpackPlugin and EJS?


Using the same template file with HtmlWebpackPlugin and EJS?

Content Index :

Using the same template file with HtmlWebpackPlugin and EJS?
Tag : javascript , By : robinator
Date : November 28 2020, 12:01 PM

may help you . In HtmlWebpackPlugin, <%- means output escaped and <%= means output unescaped. In EJS, it's the opposite. Is it possible to swap them for either HtmlWebpackPlugin or EJS? , Here's the custom loader I used:
// From html-webpack-loader/lib/loader.js

const _ = require('lodash');

module.exports = function (source) {
  const allLoadersButThisOne = this.loaders.filter(loader => loader.normal !== module.exports);
  // This loader shouldn't kick in if there is any other loader (unless it's explicitly enforced)
  if (allLoadersButThisOne.length > 0) {
    return source;
  }
  // Skip .js files (unless it's explicitly enforced)
  if (/\.js$/.test(this.resourcePath)) {
    return source;
  }

  // The following part renders the template with lodash as a minimalistic loader
  //
  const template = _.template(source, {
    interpolate: /<%-([\s\S]+?)%>/g,
    escape: /<%=([\s\S]+?)%>/g,
    variable: 'data',
  });
  // Use __non_webpack_require__ to enforce using the native nodejs require
  // during template execution
  return `var _ = __non_webpack_require__(${JSON.stringify(require.resolve('lodash'))});
    module.exports = function (templateParams) { with(templateParams) {
      return (${template.source})();
    }}`;
};

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

HtmlWebpackPlugin erase template div


Tag : javascript , By : fstender
Date : March 29 2020, 07:55 AM
hop of those help? A typo in the template key in your configuration means that it is using a default template and not the one you were trying to include. The default behavior makes this error difficult to spot.
tempalte : __dirname + '/app/index.html' should be template : __dirname + '/app/index.html'

Using nunjucks with htmlWebpackPlugin using dynamic vars in the template


Tag : javascript , By : Longchao Dong
Date : March 29 2020, 07:55 AM
should help you out Alright, so I found a workaround here with the nunjucks-isomorphic-loader which seems not super supported but still. It works for now !
Here's my webPack config
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const DEV_ENV = process.env.NODE_ENV === 'dev'

const wpConfig = {
  entry: './assets/js/app.js',

  output: {
    path: path.resolve('./dist/js'),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      // Javascript
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },

      // Nunjucks - HTML
      {
        test: /\.njk$/,
        use: [
          {
            loader: 'nunjucks-isomorphic-loader',
            query: {
              root: [path.resolve(__dirname, 'assets/templates')]
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      DEV_ENV: DEV_ENV
    }),

    new HtmlWebpackPlugin({
      myOptions: { foo: 'bar' },
      filename: path.join(__dirname, '/' + page.filename),
      template: 'assets/templates/index.njk'
    })
  ]
}

module.exports = wpConfig
{% set vars = htmlWebpackPlugin.options.myOptions %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ vars.foo }}</title>
  </head>
  <body>
    <header>
    {% block header %}
      <h1 class="header-logo">
        <a href="#">{{ vars.foo }}</a><!-- Outputs bar -->
      </h1>
    {% endblock %}
    </header>

    {% block content %}

    {% endblock %}
  </body>
</html>
{% extends "_layout.njk" %}

{% block content %}
here's the content of my `foo` var: {{ vars.foo }}
{% endblock %}

Write template to disk by HtmlWebpackPlugin when using webpack-dev-server


Tag : javascript , By : TC.
Date : March 29 2020, 07:55 AM
Hope this helps webpack-dev-server does not write the bundled files to disk, it only reads it from memory.
To write the bundled files to disk you have to manually use the webpack --watch in the npm scripts of your package.json such that your start script looks like this
"scripts": {
  "start": "webpack --watch && webpack-dev-server --progress --colors",
}

Use HTMLWebpackPlugin with an EJS file


Tag : webpack , By : littlefuzz
Date : March 29 2020, 07:55 AM

Index.html template isn't loading favicon for HtmlWebpackPlugin


Tag : javascript , By : Vlad Sirenko
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , HTMLWebpackPlugin will not parse the HTML to find your resources. You'll need to include it like this in your template:
index.html
<link rel="shortcut icon" href="${require('favicon.ico')}">
{
   test: /\.ico$/,
   loader: 'file-loader'
}
Related Posts Related QUESTIONS :
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com