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
- Handles html link imports. With Hot Code Reload Support
- Handles external script files (script src). With Hot Code Reload Support
- Handles external css files (link rel stylesheet)
- Handles template tags.
- Removes comments and unecessary whitespaces.
- Handles loading order of html and js inside the polymer files
- Adds components to document during runtime.
Installation
npm i -D wc-loader
Usage
module: rules: test: /\.js$/ // handles js files. <script src="path.js"></script> and import 'path'; use: loader: 'babel-loader' exclude: /node_modules/ test: /\.$/ // 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 -->
// webpack config. options.root can also be used loader: 'wc-loader?root=/absolue/path/to/root/folder' // or loader: 'wc-loader?root=' + path // 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?
⭐️ this repo
Found a bug?
Raise an issue!
License
MIT. Check licence file.