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