Resolve <link rel="import" href=...> as module import? about polymer-webpack-loader

[ChadKillingsworth]

For a URL, href="foo/bar.html means import './foo/bar.html.

Thankfully webpack has a special syntax to escape that: href="~foo/bar.html" which means import 'foo/bar.html'.

[ChadKillingsworth]

Missed the last part:

and have Webpack lookup the correct url in my components folder?

Using the ~ prefix, you'll switch to the node module resolution algorithm. That will attempt to lookup components in your node_modules folder (or bower_components if you have it configured). You can customize those folders for webpack, but you'd really be doing something non-standard at that point.

[seb-ster]

Thanks!
Saw the ~ mentioned in your Polymer+Webpack video and saw no use for it then. Completely forgot about it.

and have Webpack lookup the correct url in my components folder?

In my previous setup (just using modules) i had Webpack setup so that import URLs were resolved not only against the node_modules folder, but also against my own src/modules folder.
This way i was able to consistently reference npm modules as well as my own private modules.

And now that i got <link> working, i can use that same setup again.

Webpack excerpt:

  resolve: {
    modules: [
      'node_modules',
      'bower_components',
      path.resolve(__dirname, './src/components')
    ],
    descriptionFiles: ['package.json']
  }