这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战
loader介绍
由于webpack 只能识别与分析 JavaScript 和 JSON 文件，于是面对不是这类文件时，我们需要对webpack的功能进行拓展，而loader 可以让 webpack能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
webpack 的其中一个强大的特性就是能通过
import导入任何类型的模块（例如.css文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在webpack的配置文件中我们可以通过如下方式配置我们需要对某一类型文件处理的loader
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
};
上列代码中的modul.export的module的rules中定义我们需要处理的文件以及相应的loader。如果我们配置了这样的代码，webpack就会在打包文件时，发现有require和import引用如txt文件的地方，先对源文件进行loader的预处理。
module.rules 允许我们在 webpack 配置中指定多个 loader。 这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览：
loader执行
loader 从右到左（或从下到上） 地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
// [style-loader](/loaders/style-loader)
{ loader: 'style-loader' },
// [css-loader](/loaders/css-loader)
{
loader: 'css-loader',
options: {
modules: true
}
},
// [sass-loader](/loaders/sass-loader)
{ loader: 'sass-loader' }
]
}
]
}
};
loader的特性
- loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行（也就是config定义中从下往上的执行顺序执行）。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个
loader，依此类推。最后，链中的最后一个loader，返回webpack所期望的JavaScript。 - loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何操作。
- 在多次模块的转化之间，我们不应该在 loader 中保留状态。每个 loader 运行时应该确保与其他编译好的模块保持独立，同样也应该与前几个 loader 对相同模块的编译结果保持独立。
- 如果我们在 loader 中用到了外部资源，我们必须声明这些外部资源的信息。这些信息用于在监控模式下验证可缓存的 loader 以及重新编译。
- 除了常见的通过
package.json的main来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用loader字段直接引用一个模块。 - 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
常用的loader
- webpack内置CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。
- DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。
- HotModuleReplacementPlugin 热更新
- 样式处理less-loader, sass-loader
- 框架代码处理：babel-loader，babel-preset-es2015，babel-preset-react
