Options Reference

Usage Difference Between Webpack 1 & 2

For Webpack 2: pass the options directly to the loader rule.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.kdu$/,
        loader: 'kdu-loader',
        options: {
          // kdu-loader options
        }
      }
    ]
  }
}

For Webpack 1.x: add a root kdu block in your Webpack config.

module.exports = {
  // ...
  kdu: {
    // kdu-loader options
  }
}

loaders

  • type: { [lang: string]: string }

    An object specifying Webpack loaders to overwrite the default loaders used for language blocks inside *.kdu files. The key corresponds to the lang attribute for language blocks, if specified. The default lang for each type is:

    • <template>: html
    • <script>: js
    • <style>: css

    For example, to use babel-loader and eslint-loader to process all <script> blocks:

    // Webpack 2.x config
module: {
  rules: [
    {
      test: /\.kdu$/,
      loader: 'kdu-loader',
      options: {
        loaders: {
          js: 'babel-loader!eslint-loader'
        }
      }
    }
  ]
}

preLoaders

  • type: { [lang: string]: string }

  • only supported in 10.3.0+

    The config format is the same as loaders, but preLoaders are applied to corresponding language blocks before the default loaders. You can use this to pre-process language blocks - a common use case would be build-time i18n.

postLoaders

  • type: { [lang: string]: string }

  • only supported in 10.3.0+

    The config format is the same as loaders, but postLoaders are applied after the default loaders. You can use this to post-process language blocks. However note that this is a bit more complicated:

    • For html, the result returned by the default loader will be compiled JavaScript render function code.

    • For css, the result will be returned by kdu-style-loader which isn't particularly useful in most cases. Using a postcss plugin will be a better option.

postcss

Note: in 11.0.0+ it is recommended to use a PostCSS config file instead. The usage is the same as postcss-loader.

  • type: Array or Function or Object

    Specify custom PostCSS plugins to be applied to CSS inside *.kdu files. If using a function, the function will called using the same loader context and should return an Array of plugins.

    // ...
{
  loader: 'kdu-loader',
  options: {
    // note: do not nest the `postcss` option under `loaders`
    postcss: [require('postcss-cssnext')()],
    loaders: {
      // ...
    }
  }
}

    This option can also be an object that contains options to be passed to the PostCSS processor. This is useful when you are using PostCSS projects that relies on custom parser/stringifiers:

    postcss: {
  plugins: [...], // list of plugins
  options: {
    parser: sugarss // use sugarss parser
  }
}

postcss.config

New in 13.2.1

  • type: Object

  • default: undefined

    This field allows customizing PostCSS config in the same way as postcss-loader.

    • postcss.config.path

      Specify a path (file or directory) to load the PostCSS config file from.

      postcss: {
  config: {
    path: path.resolve('./src')
  }
}

    • postcss.config.ctx

      Provide context to PostCSS plugins. See postcss-loader docs for more details.

cssSourceMap

  • type: boolean

  • default: true

    Whether to enable source maps for CSS. Disabling this can avoid some relative path related bugs in css-loader and make the build a bit faster.

    Note this is automatically set to false if the devtool option is not present in the main Webpack config.

esModule

  • type: boolean

  • default: true (v13.0+)

    Whether to emit esModule compatible code. By default kdu-loader will emit default export in commonjs format like module.exports = ..... When esModule is set to true, default export will be transpiled into exports.__esModule = true; exports = .... Useful for interoperating with transpiler other than Babel, like TypeScript.

    version note: up to v12.x, default value is false.

preserveWhitespace

  • type: boolean

  • default: true

    If set to false, the whitespaces between HTML tags in templates will be ignored.

compilerModules

  • type: Array<ModuleOptions>

  • default: []

    Configure modules options for kdu-template-compiler. In about details, see more modules option of kdu-template-compiler.

compilerDirectives

  • type: { [tag: string]: Function }

  • default: {} (v13.0.5+)

    version note: in v12.x, supported in v12.2.3+

    Configure directives options for kdu-template-compiler, In about details, see more directives option of kdu-template-compiler.

transformToRequire

  • type: { [tag: string]: string | Array<string> }

  • default: { img: 'src', image: 'xlink:href' }

    During template compilation, the compiler can transform certain attributes, such as src URLs, into require calls, so that the target asset can be handled by Webpack. The default config transforms the src attribute on <img> tags and xlink:href attribute on <image> tags of SVG.

buble

  • type: Object

  • default: {}

    Configure options for buble-loader (if present), AND the buble compilation pass for template render functions.

    version note: in version 9.x, the template expressions are configured separately via the now removed templateBuble option.

    The template render functions compilation supports a special transform stripWith (enabled by default), which removes the with usage in generated render functions to make them strict-mode compliant.

    Example configuration:

    // webpack 1
kdu: {
  buble: {
    // enable object spread operator
    // NOTE: you need to provide Object.assign polyfill yourself!
    objectAssign: 'Object.assign',

    // turn off the `with` removal
    transforms: {
      stripWith: false
    }
  }
}

// webpack 2
module: {
  rules: [
    {
      test: /\.kdu$/,
      loader: 'kdu-loader',
      options: {
        buble: {
          // same options
        }
      }
    }
  ]
}

extractCSS

New in 12.0.0

  • type: boolean
  • default: false

Automatically extracts the CSS using extract-text-webpack-plugin. Works for most pre-processors out of the box, and handles minification in production as well.

The value passed in can be true, or an instance of the plugin (so that you can use multiple instances of the extract plugin for multiple extracted files).

This should be only used in production so that hot-reload works during development.

Example:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.kdu$/,
        loader: 'kdu-loader',
        options: {
          extractCSS: true
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

Or passing in an instance of the plugin:

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var plugin = new ExtractTextPlugin("style.css")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.kdu$/,
        loader: 'kdu-loader',
        options: {
          extractCSS: plugin
        }
      }
    ]
  },
  plugins: [
    plugin
  ]
}

optimizeSSR

New in 12.1.1

  • type: boolean
  • default: true when the webpack config has target: 'node' and kdu-template-compiler is at version 2.4.0 or above.

Enable Kdu SSR compilation optimization that compiles part of the vdom trees returned by render functions into plain strings, which improves SSR performance. In some cases you might want to explicitly turn it off because the resulting render functions can only be used for SSR and cannot be used for client-side rendering or testing.

cacheBusting

New in 13.2.0

  • type: boolean
  • default: true in development mode, false in production mode.

Whether generate source maps with cache busting by appending a hash query to the file name. Turning this off can help with source map debugging.

hotReload

New in 13.5.0

  • type: boolean
  • default: true in development mode, false in production mode or when the webpack config has target: 'node'.
  • allowed value: false (true will not force Hot Reload neither in production mode nor when target: 'node')

Whether to use Webpack Hot Module Replacement to apply changes in the browser without reloading the page. Use this option (value false) to disable the Hot Reload feature in development mode.

results matching ""

    No results matching ""