# koc-loader
**Repository Path**: zaaksam/koc-loader
## Basic Information
- **Project Name**: koc-loader
- **Description**: koc-loader 是一个 webpack loader，可以使用类似 Vue 单文件组件的风格来编写和使用 Knockout 组件。
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 5
- **Forks**: 3
- **Created**: 2017-11-16
- **Last Updated**: 2022-07-28
## Categories & Tags
**Categories**: javascript-toolkits
**Tags**: None
## README
# koc-loader
Knockout component loader for webpack
[中文说明示例](https://my.oschina.net/zaaksam/blog/1574629)
You can write component file like Vue:
hello.koc
```html
```
Webpack.config.js:
```js
{
module: {
resolve: {
extensions: ['.ts', '.js', '.koc']
},
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.koc$/]
}
},
{
test: /\.koc$/,
loader: 'koc-loader'
}
]
}
}
```
app.ts (app.js)
```ts
import ko from 'knockout'
import Hello from './hello.koc'
ko.components.register('hello', Hello)
ko.applyBindings()
```
index.html
```html
```
koc.d.ts
```ts
///
declare module "*.koc" {
const koc: KnockoutComponentTypes.Config
export default koc
}
```
Thanks:
* [san-loader](https://github.com/ecomfe/san-loader)
* [vue-loader](https://github.com/vuejs/vue-loader)