webpack-loader 开发实践

这篇文章主要记录如何使用loader提高团队开发效率

在开始之前我们我们需要去了解loader是什么东西？
vue-cli为我们做了什么，让我们可以用sfc的方式去开发vue项目。
这里我们测试的场景是，vue-cli搭建的vue项目下如何去集成一个全新的loader。

首先我们在vue.config.js中配置我们用于测试的 list-loader

这段代码可能需要解读一下。

// 这个地方其实的为我们的loader设置一个别名。
config.resolveLoader.alias.set("ListLoader", path.resolve("./loaders/list-loader.js"))

// 这里是为了给我们的loader设置rule，像之前配置webpack loader一样
const amRule = config.module.rule("ListLoader").test(/\.am$/);

// 当我们匹配到以后，我们应该使用那些loader去解析它。
// 这个地方需要注意的是我们的loader是按照顺序、链式调用的。
amRule.use("ListLoader").loader("ListLoader").loader("vue-loader").end();