webpack-component-loader

A webpack loader to componentify CSS/JS/HTML without framework

Conception

简体中文: 如何在没有前端框架的情况下实现组件化

日本語: Frontend Framework無しでComponent化を導入する

highlight features

1. 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

RoadMap

License

MIT