Webpack 之 Loader 详解

什么是Loader

Loader 用于对模块的源代码进行转换。 webpack本身只能处理javascript的模块，所以就需要Loader来处理其他的任何类型的资源和模块。 loader 可以将文件从不同的语言如（TypeScript）转换为javascript ,或者是将内联图像转换为dataURL，甚至可以直接在js模块中直接import引入css文件。

小例子：

// 例如： 使用 loader 告诉webpack 加载css文件，或者是将 TypeScript 转换为 javascript .
// 首先应该安装一下依赖
npm install --save-dev css-loader ts-loader

// webpack.config.js

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

使用Loader

有三种方式可以使用

• 配置 【推荐使用】 在 webpack.config.js 文件中指定 loader。
• 内联 在每个 import 语句中显示指定 Loader
• CLI 在shell命令中指定

配置

webapck.config.js中允许你配置多个loader,这种方式简便，并且当你出错的时候， 很方便的去找到错误并修改。

module.exports = {
    module: {
        rules: [
            { 
                test: /\.css$/, 
                use : [
                    {loader: 'style-laoder'},                    // 指定多个loader
                    {
                        loader: 'css-loader', 
                        options: {                                // 参数选项
                            modules: true
                        }
                    }
                ]
            },
            { test: /\.ts$/, use : 'ts-loader'},
        ]
    }
};

内敛

在 import 语句中指定 loader 使用!来将loader分割开，也可以传递参数，?key=value&foo=bar

CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
// 表示会对 `.jade` 文件使用` jade-loader `，对` .css `文件使用 `style-laoder ` `css-loader`处理。

Loader 属性

1. loader 支持链式传递，一组的链式式按照 相反的顺序来执行的，比如 'css=style-loader!css-loader'，先执行css-loader 在执行 style-loader ，第一个loader的返回值给下一个loader.然后最后一个loader返回webpack所预期的结果。
2. loader 也能够使用 options 对象进行配置。
3. 插件(plugin)可以为 loader 带来更多特性。