4.1.1 优化 loader 配置

2019-11-27  本文已影响0人  柠檬与断章

4.1.1 优化 loader 配置
问题一:优化 loader 配置?

由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理。
在使用 Loader 时可以通过test、include、exclude三个配置项来命中 Loader 要应用规则的文件。 为了尽可能少的让文件被 Loader 处理,可以通过include去命中只有哪些文件需要被处理。

举例说明

以采用 ES6 的项目为例,在配置 babel-loader 时,可以这样:

module.exports = {
module: {
rules: [
{
// 如果项目源码中只有 js 文件就不要写成 /.jsx?/,提升正则表达式性能 test: /\.js/,
// babel-loader 支持缓存转换出的结果,通过 cacheDirectory 选项开启
use: ['babel-loader?cacheDirectory'],
// 只对项目根目录下的 src 目录中的文件采用 babel-loader
include: path.resolve(__dirname, 'src'),
},
]
},
};
你可以适当的调整项目的目录结构,以方便在配置 Loader 时通过include去缩小命中范围。

上一篇下一篇

猜你喜欢

热点阅读