Resolve <link rel="import" href=...> as module import?

[seb-ster]

Sorry if i'm overlooking something but I've been trying to get my head around this for 2 days. So i got the basic Polymer+Webpack setup working for the Starter kit.

Now i'm working on my own element. My file structure is roughly as follows:

• bower_components
• public
• src
  • index.html
  • components
    • my-special-icon
    • my-special-icon.html

I have a simple index.html as the Webpack entrypoint. This includes my-special-icon component, which just displays a polymer icon.

public is my ouput folder.

my-special-icon.html has <link rel="import" href="../../../bower_components/iron-icons/maps-icons.html"> and then places the icon <iron-icon icon="maps:directions-bus"></iron-icon>.

My question, do i really need that 'ugly' <link> url? Can i not have Webpack look up the 'iron-icons/maps-icons.html' like i can with my javascript imports?

And can i have index.html just contain a <link rel="import" href="my-special-icon/my-special-icon.html"> and have Webpack lookup the correct url in my components folder?

It works fine like it is now, but i can see it becoming a hassle when i start linking to my own elements, or moving stuff around in development stage.

[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']
  }