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
wc-loader helps you use webcomponents (polymer, x-tags etc also) with webpack.
wc-loader uses parse5 which parses HTML the way the latest version of your browser does. Does not use any regex to parse html. :)
- 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.
npm i -D wc-loadermodule: {
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,
},
}]
},
],
]
}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'You can either specify options as part of the loader string or as options property
{
loader: 'wc-loader',
options: {
minify: true
}
}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=/'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
}
}⭐ this repo
Raise an issue!
MIT. Check licence file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent