https://github.com/aruntk/wc-loader
:toilet: Webcomponents webpack loader.
https://github.com/aruntk/wc-loader
polymer wc-loader webcomponents webcomponents-webpack-loader webpack
Last synced: 5 months ago
JSON representation
:toilet: Webcomponents webpack loader.
- Host: GitHub
- URL: https://github.com/aruntk/wc-loader
- Owner: aruntk
- License: mit
- Created: 2016-12-27T08:23:14.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-09T23:11:41.000Z (about 8 years ago)
- Last Synced: 2025-05-03T20:35:20.618Z (5 months ago)
- Topics: polymer, wc-loader, webcomponents, webcomponents-webpack-loader, webpack
- Language: JavaScript
- Homepage:
- Size: 255 KB
- Stars: 99
- Watchers: 11
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://github.com/inikulin/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.
5. Handles loading order of html and js inside the polymer files
4. Adds components to document during runtime.
Installation
```sh
npm i -D wc-loader
```
Usage
```js
module: {
rules: [
{
test: /\.js$/, // handles js files. and import 'path';
use: [{
loader: 'babel-loader',
}],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/, // handles assets. eg 
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
},
{
test: /\.html$/, // handles html files. 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
```js
{
test: /\.html$/,
use: [
{
loader: 'babel-loader', // change this line
},
{
loader: 'wc-loader',
options: {
minify: true,
},
}]
},
```
if you are using es6 inside html use
```js
loader: 'babel-loader'
```
similarly you can use coffee, typescript etc. pipe wc result through the respective loader.
```js
loader: 'ts-loader'
```
```js
loader: 'coffee-loader'
```
### Options
You can either specify options as part of the loader string or as options property
```js
{
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.
``` html
```
```js
// 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
```js
loader: 'wc-loader?minify=true'
```
default options are
```js
const defaultMinifierOptions = {
collapseWhitespace: true,
customAttrAssign: [/\$=/],
ignoreCustomFragments: [/style\$?="\[\[.*?\]\]"/],
}
```
Use custom options - by config setting `minifierOptions`
Refer https://github.com/kangax/html-minifier for more info
```js
options: {
minify: true,
minifierOptions: {
// custom options
}
}
```
### Like it?
:star: this repo
### Found a bug?
Raise an issue!
### License
MIT. Check [licence](licence) file.