webpack-component-loader

1.0.10 • Public • Published

NPM Tests Deps Coverage

webpack-component-loader

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

illustration

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 npm Parser to extract and inject smarty template
component-pug-parser npm Parser to extract and inject pug template

RoadMap

RoadMap

License

MIT

Dependencies (6)

Dev Dependencies (14)

Package Sidebar

Install

npm i webpack-component-loader

Weekly Downloads

3

Version

1.0.10

License

MIT

Last publish

Collaborators

  • nicholaslee119