Loaders
文档地址
Loaders是一种转换器。将一种文件转换成另外一种。
示例
让webpack将CSS或TypeScript转换成javaScript.
- 安装loader
npm install --save-dev css-loader
npm install --save-dev ts-loader
- 配置webpack.config.js，
使用css-loader处理.css文件。
使用ts-loader处理.ts文件。
module.exports = {
module: {
rules: [
{test: /\.css$/, use: 'css-loader'},
{test: /\.ts$/, use: 'ts-loader'}
]
}
};
loader可以通过其他方式进行配置。
{test: /\.css$/, loader: 'css-loader'}
// or equivalently
{test: /\.css$/, use: 'css-loader'}
// or equivalently
{test: /\.css$/, use: {
loader: 'css-loader',
options: {}
}}
Configuration
可以通过三种方式添加loader。
通过configuration
通过
require关键字通过CLI
webpack.config.js
module.rules允许在配置多个loader.
使用这种方式进行配置，可以让代码变得简洁。
而且可以对使用的loader有整体的监控。
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
- require
能够通过require,define,require.ensure指定loader的使用。
将loaders使用!分割，每个部分都会使用当前目录进行依赖查找。
require('style-loader!css-loader?modules!./styles.css');
通过这种方式进行loader设置，会覆盖通过配置文件设置的方式。
通过该方式进行设置，也可以传递参数,参数类似于web(?key=value&foo=bar)，
也可以传递JSON对象(?{"key":"value","foo":"bar"})
最好使用配置的方式进行设置，可以减少代码中的处理，并且使用配置的形式会让debug速度更快
- CLI
使用命令行传参
webpack --module-bind jade --module-bind 'css=style!css'
上面的示例使用了jade-loader处理.jade文件，style-loader和css-loader处理.css文件。
