Webpack usage examples

[mityukov]

Hi, can't figure out how to use it with webpack.

Here are some examples:

require('hint.css'); // loading npm module "as-is"

Module not found: Error: Cannot resolve module 'hint.css' in

require('hint.css/hint.min.css'); // loading css file from the npm module

it builds, styles are present in the css file, but hints don't work (no errors in JS console)

require('./css/hint.min.css'); // loading just css file (not from npm), downloaded from the site

it builds, it works.

Ah-ha!

If i make this thing:
cp node_modules/hint.css/hint.min.css websrc/css/hint.min2.css
, then this:
require('./css/hint.min2.css');
=> it doesn't work as well. I.e., it seems that the issue is not with the way of pluggin in, but with the css file itself that comes in the npm module...

[mityukov]

My local version (the one which works) is v2.2.0. Npm has version 2.3.2 and this one doesn't work.

HTML code is generated by this JS:
document.write('<h1 data-hint="Welcome message">welcome</h1>');

[chinchang]

Will be fixed by #157

Also make sure you are using a style-loader and css-loader to load CSS files because on its own webpack cannot understand anything apart from JS files. Example webpack config file:

 module.exports = {
      entry: './main.js',
      output: {
               path: './',
               filename: 'bundle.js'
           },
    module: {
      loaders: [{
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader']
      }]
    }
  };

About your html that doesn't work: document.write('<h1 data-hint="Welcome message">welcome</h1>');. This has missing position class (hint--right etc)

[chinchang]

v2.4.1 should fix this.