// 最基本的结构
// Loader运行在Node.js中，所以可以调用任何Node.js的API
const sass = require('sass');

module.exports = function (source) {
  // source为compiler传递给Loader的一个文件的原内容
  return sass(source)
}

// 借助loader-utils
const loaderUtils = require('loader-utils');

module.exports = function (source) {
  // 获取用户为当前Loader 传入的options
  const options = loaderUtils.getOptions(this);
  return source
}

module.exports = function (source) {
  // 通过this.callback告诉webpack 返回的结果
  this.callback(null, source, sourceMaps);

  // 当使用this.callback返回内容时，该Loader必须返回undefined
  // 以让Webpack知道该Loader返回的结果在this.callback中，而不是return中
  return;

  // 其中this.callback 是webpack向Loader中注入的API，以方便Loader和webpack之间的通信。
}

this.callback(
  // 当无法转换原内容时，为Webpack 返回一个Error
  err: Error | null,
  // 原内容转换后的内容
  content: string | Buffer,
  // 可选，用于通过转换后的内容得出原内容的Source Map ，以方便调试
  // webpack 会通过 this.sourceMap API 告诉Loader用户是否配置需要sourceMap
  sourceMap?: SourceMap,
  // 如果本次转换为原内容生成了AST 语法树，则可以将这个AST 返回，
  // 以方便之后需要AST 的Loader 复用该AST ，避免重复生成AST ，提升性能
  abstractSyntaxTree?: AST 
)

module.exports = function(source) {
  // 告诉Webpack 本次转换是异步的， Loader 会在callback 中回调结果
  var callback = this.async();

  // 异步操作函数
  function someAsyncOperation(source, cb) {
    var err, result, sourceMaps, ast;

    // 模拟异步
    new Promise((res, rej) => {
      resolve();
    }).then(res => {
      // ...异步操作成功后 将正确处理过需要返回的值返回
      cb(err, result, sourceMaps, ast)
    })
  }

  someAsyncOperation(source, function(err, result, sourceMaps, ast){
    // 通过callback 返回异步执行后的结果
    callback(err, result, sourceMaps, ast)
    // this.async()(err, result, sourceMaps, ast)
  })
}

module.exports = function(source) {
  console.log(source instanceof Buffer);
  // true , webpack 传进来的source会是二进制数据

  // 但是不管module.exports.raw 是不是 true, Loader都可以返回二进制数据
  return source
}

// 通过exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据
// 如果没有这一行 则Loader只能拿到字符串
module.exports.raw = true;

// 如果我们不想让Webpack 不缓存该Loader 的处理结果，则可以这样：

module.exports = function(source) {
  // 关闭该Loader 的缓存功能
  this.cacheable(false);
  return source
}

module.exports = {
  resolveLoader: {
    // 去哪些目录下寻找Loader 有先后之分，先去node_modules中找，找不到再去./loader/目录中寻找。
    modules: ['node_modules', './loaders/']
  }
}

## 我是二级标题

### 我是三级标题

我是内容

// main.js
import demo from './demo.md';

console.log(demo);

// markdown-loader.js
const marked = require('marked'); // 可以将marked转换为html

module.exports = (source) => {
  console.log('source', source);
  // return source; 
  // error 接受到的source是md文件的内容，loader必须要返回一个合格js代码字符串，可以理解为能够被eval执行

  const html = marked(source)
  // return html; 
  //  <h2 id="我是二级标题">我是二级标题</h2>
  //  <h3 id="我是三级标题">我是三级标题</h3>
  //  <p>我是内容</p>
  //  也会报错，因为只能接受js代码字符串
  // 所以需要将 html 字符串转换为 js代码字符安

  // 第一种 自己拼接
  // const result = `module.exports = ${JSON.stringify(html)}`;
  // return result 

  // 第二种 使用 html-loader，在webpack配置里面，在针对.md文件的配置中
  // 在自己写的 markdown-loader 之前插入 html-loader
  // 那么 我们这个 markdown-loader处理之后返回的 html字符串，就会交给 html-loader去处理
  // 这个loader会将html处理成js
  return html;
}

// webpack.config.js

module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        use: ['html-loader', './src/markdown-loader']
        // 如果不使用 html-loader可以删掉，选择自己拼接一个
      }
    ]
  }
}