nicholaslee119 / Webpack Component Loader
Licence: mit
📦 A webpack loader to componentify CSS/JS/HTML without framework
Stars: ✭ 105
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Webpack Component Loader
Url Loader
A loader for webpack which transforms files into base64 URIs
Stars: ✭ 1,361 (+1196.19%)
Mutual labels: webpack-loader
React 3d Viewer
A 3D model viewer component based on react.js 一个基于react.js的组件化3d模型查看工具
Stars: ✭ 100 (-4.76%)
Mutual labels: component
React Native Sketch View
A React Native component for touch based drawing supporting iOS and Android.
Stars: ✭ 97 (-7.62%)
Mutual labels: component
Vue Truncate Collapsed
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
Stars: ✭ 98 (-6.67%)
Mutual labels: component
React Autocomplete Input
Autocomplete input field for React
Stars: ✭ 100 (-4.76%)
Mutual labels: component
Object Editor React
Schema-aware editor for structured JSON objects (drop-in React component)
Stars: ✭ 104 (-0.95%)
Mutual labels: component
Quark
Quark.js is a microscopic atomic CSS polyfill in JS just 140 bytes
Stars: ✭ 97 (-7.62%)
Mutual labels: component
Polyfill Util
This component provides binary-safe string functions, using the mbstring extension when available.
Stars: ✭ 1,364 (+1199.05%)
Mutual labels: component
Vue Promised
💝 Composable Promises & Promises as components
Stars: ✭ 1,325 (+1161.9%)
Mutual labels: component
React Video Renderer
Build custom video players effortless
Stars: ✭ 100 (-4.76%)
Mutual labels: component
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (+0%)
Mutual labels: webpack-loader
Vueup
Simple, lightweight and super fast global notification popup for Vue.js
Stars: ✭ 104 (-0.95%)
Mutual labels: component
Vue Tweezing
💃 Easy, customizable and automatic tweening nicely served in scoped slots
Stars: ✭ 101 (-3.81%)
Mutual labels: component
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 |
RoadMap
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].