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.

npm i -D wc-loader

module: {
    rules: [
      {
        test: /\.js$/, // handles js files. <script src="path.js"></script> and import 'path';
        use: [{
          loader: 'babel-loader',
        }],
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/, // handles assets. eg <img src="path.png">
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]?[hash]'
          }
        }]
      },
      {
        test: /\.html$/, // handles html files. <link rel="import" href="path.html"> and import 'path.html';
        use: [
          // if you not using es6 inside html remove babel-loader
          {

            loader: 'babel-loader',
            // similarly you can use coffee, typescript etc.
          },
          {
            loader: 'wc-loader',
            options: {
              minify: true,
            },
          }]
      },
    ],
  ]
}

Using es6, typescript, coffee etc inside html

In the following config

{
  test: /\.html$/,
  use: [
    {
      loader: 'babel-loader', // change this line
    },
    {
      loader: 'wc-loader',
      options: {
        minify: true,
      },
    }]
},

if you are using es6 inside html use

loader: 'babel-loader'

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

loader: 'ts-loader'

loader: 'coffee-loader'

Options

You can either specify options as part of the loader string or as options property

{
  loader: 'wc-loader',
  options: {
    minify: true
  }
}

'Root-relative' URLs

For urls that start with a /, the default behavior is to not translate them. You'll get a file not found error in the browser. (/path = example.com/path for the browser) If a root query parameter is set, however, it will be prepended to the url and then translated.

<!-- file.html -->
<img src="/image.jpg">

// webpack config. options.root can also be used

loader: 'wc-loader?root=/absolue/path/to/root/folder'

// or

loader: 'wc-loader?root=' + path.resolve('relative/path/to/root/folder')

// example

loader: 'wc-loader?root=/'

Minify html

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

options: {
   minify: true,
   minifierOptions: {
     // custom options
   }
}

Like it?

:star: this repo

Found a bug?

Raise an issue!

License

MIT. Check licence file.