devonzuegel

/**
 * There are direct and delegate rules. Direct Rules need a test, 
 * Delegate rules delegate to subrules bringing their own. Direct
 * rules can optionally contain delegate keys (oneOf, rules).
 *
 * These types exist to enforce that a rule has the keys 
 * `((loader XOR loaders) AND test) OR oneOf OR rules`.
 */
interface BaseRule {        
    enforce?: 'pre' | 'post';

devonzuegel

{
    rules: [  // These 3 rules are equivalent:
        {
            test: /\.jsx$/,
            loader: "babel-loader",
        }, {
            test: /\.jsx$/,
            use: ["babel-loader"],
        }, {
            test: /\.jsx$/,

devonzuegel

interface OldModule extends BaseModule {
    loaders: Rule[]; /** An array of automatically applied loaders. */
}
interface NewModule extends BaseModule {
    rules: Rule[]; /** An array of rules applied for modules. */
}
type Module = OldModule | NewModule;

devonzuegel

{
  /** 
   * Choose a style of source mapping to enhance the debugging process. 
   * These values can affect build and rebuild speed dramatically. 
   **/
   devtool?: 'eval' | 'inline-source-map' | 'cheap-eval-source-map' | 'cheap-source-map' | 'cheap-module-eval-source-map' | 'cheap-module-source-map' | 'eval-source-map' | 'source-map' |
             'nosources-source-map' | 'hidden-source-map' | 'nosources-source-map' | '@eval' | '@inline-source-map' | '@cheap-eval-source-map' | '@cheap-source-map' | '@cheap-module-eval-source-map' |
             '@cheap-module-source-map' | '@eval-source-map' | '@source-map' | '@nosources-source-map' | '@hidden-source-map' | '@nosources-source-map' | '#eval' | '#inline-source-map' |
             '#cheap-eval-source-map' | '#cheap-source-map' | '#cheap-module-eval-source-map' | '#cheap-module-source-map' | '#eval-source-map' | '#source-map' | '#nosources-source-map' |
             '#hidden-source-map' | '#nosources-source-map' | '#@eval' | '#@inline-source-map' | '#@chea

devonzuegel

interface Configuration {
  // ... There's other stuff in this interface
  module?: Module;
}

devonzuegel

import * as webpack from 'webpack'
const config: webpack.Configuration = {
  module: {
    rules: [{
      test: /\.css$/,      // Match any files that end with ".css"
      use: 'style-loader', // Pipe these files through style-loader upon import
    }]
  }
}
export default config

devonzuegel

import * as webpack from 'webpack'

const config: webpack.Configuration = {  /* We'll add stuff here :) */  }

export default config

devonzuegel

/** In the module request **/
const oneLoaderAbsolute = require("my-loader!./my-awesome-module")
const oneLoaderRelative = require("./loaders/my-loader!./my-awesome-module")
const chainedLoaders    = require("style-loader!css-loader!less-loader!./my-styles.less")
const withQueryParams   = require("loader?with=parameter!./file")

/** By config **/
{   
  module: {

devonzuegel

import * as webpack from 'webpack'

interface Config extends webpack.Configuration {
  module: {
    rules: webpack.NewUseRule[]
  }
}
const config: Config = {
  module: {
    rules: [{

devonzuegel

import * as webpack from 'webpack'

export interface MyConfig extends webpack.Configuration {
  resolve: webpack.NewResolve
}