p3.webpack.t.loaders

General

• transform module
• allow webpack to process other file types

Modes

CLI Format

status: TODO

InlineFormat

var module = require("a-loader!./amodule")

Config Format

{
    module: {
        loaders: [
            { test: /\.coffee$/, loader: "coffee-loader" }
        ],
        preLoaders: [
            { test: /\.coffee$/, loader: "coffee-hint-loader" }
        ]
    }
};

• use

module: {
    rules: [
        {test: /\.css$/, use: 'css-loader'},
        {test: /\.ts$/, use: 'ts-loader'}
    ]
}

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]

  }

API

Properties

• test: filetype
• use: what loader to use

=== Rest

Details

Chaining

• multiple loaders can be chained and will be evaluated from right to left

require("style-loader!css-loader!less-loader!./my-styles.less");

Order

• preloader
• loaders
• loaders in require
• postLoaders

Query Parameter

• you can pass queries to your loaders

Index

• raw-loader: return as text: https://github.com/webpack/raw-loader
• style-loader: add css to dom: https://github.com/webpack/style-loader