Loads polymer-elements as first-class bundles. Allows you to separate components into a .js file, a .html file containg the <polymer-element>
and a CSS file. Polymer-loader can be configured to use your choice of HTML/CSS preprocessor (Jade, EBS, Stylus, LESS, SASS, etc.).
I suggest putting your components in their own directory, say /components
▾ components/
▾ foo/
foo.html
foo.js
foo.styl
▸ somethingElse/
▾ types/
▾ chart/
chart.html
chart.js
chart.styl
Where each component consists of the 3 parts of a webcomponent. Your Polymer('foo', {})
registration would go in the .js file.
Now you will need to add a preLoaders
entry to your module
section in your webpack.config.js
module: {
loaders: [
....
],
preLoaders: [
{test: /\/components\/.+\.js$/, loader: 'polymer-loader?templateExtension=html&styleExtension=styl'}
]
}
Change templateExtension
& styleExtension
to desired filetypes (don't forget to have the correct loader
config for that extension!)
Finally, whenever/wherever you want to require()
this module in your bundle or chunk, just call require('../components/foo/foo.js')
(remember it's relative to the file you require from).
** Extensionless, absolute require **
Here's a little function that generates aliases for the files in your /components
directory, allowing you to require components like require('components/foo')
and require('components/foo/type/bar')
from any file in your application (without having ot have every component's .js file named index.js
).
alias: (function() {
var o = {}, root = __dirname + '/components/';
function parse(nodes, parent) {
if(parent && nodes.indexOf(path.basename(parent) + '.js') > -1)
o['components/'+parent] = __dirname + '/components/' + parent + '/' + path.basename(parent) + '.js';
else
nodes.forEach(function(node) {
var path = root+(parent ? parent+'/' : '')+node;
if(fs.statSync(path).isDirectory())
parse(fs.readdirSync(path), (parent ? parent+'/' : '')+node);
});
}
parse(fs.readdirSync(root));
return o;
})()
Stylus Imports
Stylus-loader
is nice enough to resolve @imports
for us, so as long as you have your css/style directory listed in modulesDirectories
you can add import common variable/helper stylus files into your component's <style>
tag.
modulesDirectories: ["node_modules", "bower_components", "css", "js"],
@import ~variables
@import ~themes
@import ~utils
foo
$bar
fooTheme()
More to come