Mgiyuk

Handlebars custom helper - migrating to Webpack We have an app based on backbone, marionette and handlebars, without import/export or require methods, managed with grunt and we are trying to migrate to webpack. I am having an issue with a custom helper for handlebars. The code of our helper : 'use strict'; function I18n() { this.constructor(arguments); } I18n.prototype = { constructor: function () { ...some stuff } get: function () { ...some stuff } ...some other functions } ourNameSpace.I18n = new I18n(); And it's included with this function in a file to load it globally : Handlebars.registerHelper('i18n', _.bind(ourNameSpace.I18n.get, ourNameSpace.I18n)); Then we are using it in the template like this : {{i18n "LblEmail"}} I tried to use handlebars-loader and I added this query object into webpack.config to add it to the bundle : { test: /.hbs$/, use: { loader: 'handlebars-loader', q...

Relative CSS urls in Webpack Webpack + file-loader + sass-loader is having trouble resolving relative paths for CSS background images. The compiled SCSS file contains a path to the background image that is relative to /dist/ instead of relative to the SCSS/CSS document. I researched this problem; sass-loader recommends using resolve-url-loader (with source maps). However, adding the resolve-url-loader made no difference to the compiled CSS. /dist/ I have been able to resolve the issue by setting the 'publicPath' to '../..' on the file-loader. Or by disabling the 'url' setting on the css-loader. Neither is a good solution and causes issues with copying files and referencing images via HTML or other sources. The online examples of Webpack and CSS place the CSS and images in the same folder (often in the root). This is not an optimal choice for my webpack implementation. The concept of structuring files in subfolders seems like a fairly basic requirement. Is this ...

Vuejs app showing Invalid host header error loop I was running a vuejs app on its own dev server, now I can access the site by public IP of machine, But after pointing it with a domain using nginx its showing an error loop in console error in console Invalid Host header [WDS] Disconnected! Due to this the script,style injection and auto reload not working. config of dev server dev: { assetsSubDirectory: "static", assetsPublicPath: "/", disableHostCheck: true, host: "0.0.0.0", // '192.168.2.39',//can be overwritten by process.env.HOST port: 8080, autoOpenBrowser: false, errorOverlay: false, notifyOnErrors: false, poll: true, devtool: "cheap-module-source-map", cacheBusting: true, cssSourceMap: true }, nginx config for the domain server { listen 80 ; listen [::]:80; server_name prajin.prakash.com; location / { proxy_pass http://localhost:8081; } } 2 Answers ...

Tree shakeable static methods (using rxjs and lodash in alongside) I want to use rxjs and lodash or ramda in the same project. I am using typescript with ECMAScript module import statements. (In an ionic project with webpack as the module bundler) rxjs lodash ramda webpack rxjs and lodash-es propagate import statements like this, to enable tree shaking: rxjs lodash-es import { map } from 'lodas-es' import { map } from 'rxjs/operators As you can see, this approach has two problems: Name clashes (I could use an alias, but I think this will lead to more confusion) Very general method names like map , filter etc. are in both libraries present and you always have to look in the import statement, which one is meant and where it came from. map filter The static method approach is much more readable in my opinion, because it is so explicit. I want to keep the syntax like it is in commonjs and also enable tree-shaking. Is this possible somehow? Which alternatives do I have he...