vue-cli生成的项目使用本地手写的webpack-loader

今天遇到一个坑，解决了，发个博客，希望和我遇到相同问题的同学不要卡很久。

我目前写的项目中用到了一个第三方功能的sdk，当然我们会在测试服务器来测试我们接入这个sdk有没有问题，没有问题再部署正式服务器。

那我们在项目的迭代版本和修改bug的过程中，一般会手动来改变sdk的地址，测试的时候用带日志的版本，上线的时候我们会改成不带日志并且压缩代码后的版本。

就像下面这两种情况频繁地切换

// <script src="https://development.sdk.cn"></script>
<script src="https://production.sdk.cn"></script>

<script src="https://development.sdk.cn"></script>
// <script src="https://production.sdk.cn"></script>

这样手动的操作，每操作一次，正确率就是50%，试想如果我们的程序的用户量是数以千万计、数以亿计，那如果手抖了，出错了，责任恐怕不是我们小小的前端开发人员可以承担的，此时可以离职走人了😄。

那我想的是：如果我可以写一个配置文件，把这两个sdk的地址配置好，打包的时候根据打包的环境，读取我的配置文件，那么测试之后理论上可以永远不出错😋

首先我先到了使用webpack的loader来实现一下，然后我发现我的项目是使用vue-cli3的版本来创建的，只有一个vue.config.js配置文件，然后我去它的文档上查看了下是怎么引入新的loader的，vue-cli怎么添加一个loader？文档在这里

坑的位置见下面的代码注释

// 添加一个新的loader
// vue.config.js
module.exports = {
  chainWebpack: config => {
    // sdk-choose-loader
    config.module
      .rule('sdk-choose-loader') // 规则名称，可以自定义
      .test(/\.html$/) // 正则：你想要使用这个loader处理什么文件  这里因为我想处理的是 index.html 文件中的 sdk 引入
      .use('graphql-tag/loader') // 我遇到的坑在这里 ！！！ 
        .loader('graphql-tag/loader') // 这里同上
        .end()
  }
}

解释这个坑

1. 如果你是用本地自己手写的 loader 的话，那这里要写上你的 loader 的文件的相对路径
2. 不可以只写一个名称哦
3. 也不可以像下面这样，先引入，再直接使用引入的变量放到.use()中，也是不能生效的，打包的时候还是会找不到文件路径，因为vue-cli内部实现只会把它当做路径来解析，他会报错你的根目录下没有sdkChooseLoader这个文件

// 假设我的 loader 所在位置是 /src/myLoader/sdk-choose-loader.js
// 下面这个文件也就是 vue.config.js 的位置是 /vue.config.js
const sdkChooseLoader = require( './src/myLoader/sdk-choose-loader' );

module.exports = {
  chainWebpack: config => {
    // sdk-choose-loader
    config.module
      .rule('sdkChooseLoader')
      .test(/\.html$/)
      .use('sdkChooseLoader')
        .loader('sdkChooseLoader')
        .end()
  }
}

后面想借鉴一下怎么写 loader 的话，可以看下这篇文章，不认识他哈，只是我也是参考了这篇文章写的loader 手把手教你撸一个 Webpack Loader