Webpack with requirejs/AMD

I’m working on a new module for an existing project that still uses requireJS for module loading. I’m trying to use new technologies for my new module like webpack (which allows me to use es6 loaders using es6 imports). It seems like webpack can’t reconcile with requireJS syntax. It will say things like: “Module not found: Error: Can’t resolve in “.

Problem: Webpack won’t bundle files with requireJS/AMD syntax in them.
Question: Is there any way to make webpack play nice with requireJS?

My final output must be in AMD format in order for the project to properly load it. Thanks.

Source: stackoverflow-javascript

underscore-template-loader load svg but jpeg/png

I want to load SVG inline in my underscore templates but not jpeg/png files.
For now, I know that passing [] in attributes property will not proceed any files included through src.

How i can differentiate files in underscore-template-loader by type?

My loaders:

module: {
rules: [
    test: /.js$/,
    loader: "babel-loader",
    exclude: /node_modules/
    test: /.scss$/,
    loaders: ["style-loader","css-loader?url=false,sourceMap=true","sass-loader?sourceMap=true"]
    test: /.css$/,
    loader: "style-loader!url=false"
    test: /.tpl$/,
    loader: "underscore-template-loader",
    query: {
      withImports: true,
      attributes: ['s-img:src']
    test: /.(png|jpg)$/,
    loader: 'ignore-loader'
    test: /.svg/,
    loader: 'svg-loader'

Source: stackoverflow-javascript

Webpack – compile handlebars and output html

I’m starting out with webpack and already managed to get all my development setup in webpack. Only thing that left is compiling handlebars files and emitting static html files.
Specifically I want to watch for changes in any file in ‘./src/templates/*.hbs’ compile and emit html in ‘./public/[name].html’.

Thanks for any advice.

Source: stackoverflow-javascript

Node.js + Webpack + Typescript = ENOENT: no such file or directory, open ‘//package.json’

As the node_module I need doesn’t have a @types repo, I tried to import it and I got this:

Error: ENOENT: no such file or directory, open '//package.json'

My .ts

import * as IWatermark from 'image-watermark';

When I import this module the Webpack insert this code into the bundle.js:

exports = module.exports = {
  embedWatermark: embedWatermark,
  embedWatermarkWithCb: embedWatermarkWithCb,
  version: JSON.parse(
    __webpack_require__(22).readFileSync(__dirname + '/package.json', 'utf8')).version

And then it tries to load my package.json with this path //package.json.

How do I properly load a non-typescript module into my typescript code?

Do I need a specific configuration for resolving this?

OBS: It’s Webpack 2

Source: stackoverflow-javascript