webpack-component-loader
A webpack loader to componentify CSS/JS/HTML without framework
Conception
简体中文: 如何在没有前端框架的情况下实现组件化
日本語: Frontend Framework無しでComponent化を導入する
highlight features
- Scoped CSS
Install
$npm install webpack-component-loader
Test
$npm test
Usage
webpack
import {extractor, injector, addScopeAttr} from 'webpack-component-loader-smarty-parser';
// or create the injector, extractor or addScopeAttr by yourself
function extractor (template) {
// extract the including component path from the plain text of template
}
function injector (template, component, buildOption) {
// inject the url of assets to template
}
function addScopeAttr (template, component) {
// add data-s-[hash] to tags in template for scope css, and must return Promise type
return new Promise();
}
module.exports = {
entry: {
entryA: './test/fixture/entryA.js',
entryB: './test/fixture/entryB.js'
},
output: {
path: path.resolve(__dirname, "../assets/"),
filename : 'js/[name].js',
chunkFilename: 'js/[name].chunk.js',
},
module: {
rules: [
{
test : /\.tpl?$/,
exclude: /(node_modules)/,
use: [
{
loader: 'webpack-component-loader',
options: {
isCodeSplit: false,
extractor,
injector,
addScopeAttr,
ext: '.tpl',
srcPath : path.resolve(__dirname, '.'),
builtTemplatePath : path.resolve(__dirname, '../assets/templates'),
},
},
],
},
{
test: /\.css$/,
exclude: /(node_modules)/,
enforce: "post",
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
],
},
plugins: [
new ExtractTextPlugin({
filename: "css/[name].css",
// allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "js/commons.js",
})
]
}
Ecosystem
Name | Status | Description |
---|---|---|
component-smarty-parser | Parser to extract and inject smarty template | |
component-pug-parser | Parser to extract and inject pug template |