corycook / wc-loader

:toilet: Webcomponents webpack loader.

WC Loader

Webcomponents webpack loader . Supports hot code reload. 🚽 😜

DEMO - https://github.com/aruntk/polymer-webpack-demo

Polymer Webpack Apollo-Graphql Demo - https://github.com/aruntk/githunt-polymer

About

wc-loader helps you use webcomponents (polymer, x-tags etc also) with webpack.

Under the hood

wc-loader uses parse5 which parses HTML the way the latest version of your browser does. Does not use any regex to parse html. :)

Main functions

1. Handles html link imports. With Hot Code Reload Support
2. Handles external script files (script src). With Hot Code Reload Support
3. Handles external css files (link rel stylesheet)
4. Handles template tags.
5. Removes comments and unecessary whitespaces.
6. Handles loading order of html and js inside the polymer files
7. Adds components to document during runtime.

Installation

npm i -D wc-loader

Usage

module: {
  loaders: [
    {
      test: /\.html$/, // handles html files. <link rel="import" href="path.html"> and import 'path.html';
      loader: 'wc-loader' 
      // if you are using es6 inside html use 
      // loader: 'babel-loader!wc-loader'
      // similarly you can use coffee, typescript etc. pipe wc result through the respective loader.
    },
    {
      test: /\.js$/, // handles js files. <script src="path.js"></script> and import 'path';
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(png|jpg|gif|svg)$/, // handles assets. eg <img src="path.png">
      loader: 'file-loader',
      query: {
        name: '[name].[ext]?[hash]'
      }
    },
  ]
}

Using es6, typescript, coffee etc inside html

if you are using es6 inside html use

loader: 'babel-loader!wc-loader'

similarly you can use coffee, typescript etc. pipe wc result through the respective loader.

loader: 'ts-loader!wc-loader'

loader: 'coffee-loader!wc-loader'

Options

Minify html

loader: 'babel-loader!wc-loader?minify=true'

default options are

const defaultMinifierOptions = {
  collapseWhitespace: true,
  customAttrAssign: [/\$=/],
  ignoreCustomFragments: [/style\$?="\[\[.*?\]\]"/],
}

Use custom options - by config setting minifierOptions

Refer https://github.com/kangax/html-minifier for more info

Like it?

⭐ this repo

Found a bug?

Raise an issue!

License

MIT. Check licence file.