Hot Module Replacement with multi entries

The console outputs Ignored an update to unaccepted module error, how to fix it?

log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1
log.js:25 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
log.js:25 [HMR]  - ./src/print.js

the whole console message is:

log.js:23 [HMR] Waiting for update signal from WDS...
log.js:23 [HMR] Waiting for update signal from WDS...
client?cd17:64 [WDS] Hot Module Replacement enabled.
client?cd17:64 [WDS] Hot Module Replacement enabled.
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:67 [WDS] App updated. Recompiling...
client?cd17:193 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
client?cd17:193 [WDS] App hot update...
log.js:23 [HMR] Checking for updates on the server...
log.js:25 Ignored an update to unaccepted module ./src/print.js -> 1
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
onUnaccepted @ only-dev-server.js:25
hotApply @ bootstrap e5893b5…:437
(anonymous) @ only-dev-server.js:20
log.js:25 [HMR] The following modules couldn't be hot updated: (They would need a full reload!)
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:12
(anonymous) @ only-dev-server.js:39
log.js:25 [HMR]  - ./src/print.js
./node_modules/webpack/hot/log.js.module.exports @ log.js:25
(anonymous) @ log-apply-result.js:14
./node_modules/webpack/hot/log-apply-result.js.module.exports @ log-apply-result.js:13
(anonymous) @ only-dev-server.js:39
log.js:23 [HMR] Nothing hot updated.
log.js:23 [HMR] App is up to date.
index.js:8 Accepting the updated printMe module!
log.js:23 [HMR] Updated modules:
log.js:23 [HMR]  - ./src/print.js
log.js:23 [HMR] App is up to date.

The following is my code:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hotOnly: true,
  },
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement',
      filename: 'index.html',
    }),
    new CleanWebpackPlugin(['dist']),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
};

./src/index.js:

import _ from 'lodash';
import printMe from './print.js';

if(module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');

    document.body.removeChild(element);
    element = component();
    document.body.appendChild(element);
  });
}

let element = component();

function component() {
  const element = document.createElement('div');
  const btn = document.createElement('button');

  element.innerHTML = _.join(['Hell', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(element);

./src/print.js:

export default function printMe() {
  //console.log('I get called from print.js!');
  console.log('Updating print.js...')
}

package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [
    "webpack",
    "demo"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "html-webpack-plugin": "^2.29.0",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

other environment:

  • node v7.4.0
  • npm 4.0.5
  • macOS Sierra 10.12
  • Chrome v59.0.3071.115

please give me help.


Source: stackoverflow-javascript

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