03- webpack : loader

/**
    loader: 
        1.代码转换，预处理文件。比如 Typescript -> javascript; 图片 -> data URL
        2.在一组use配置的loader数组中，loader从右到左，从下到上执行
        3.loader 从模块路径加载(node-modules中)，也可以是本地文件作为自定义loader
        4.loader 导出一个函数，并且编写为 Node.js 兼容的 JavaScript
        5.loader 必须有返回值，返回值是string或者buffer
        6.loader在webpack中给我们提供了很多的API
    
    特性：
        1、loader 支持链式调用。链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
        2、loader 可以是同步的，也可以是异步的。
        3、loader 运行在 Node.js 中。
        4、loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
        5、除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
        6、插件(plugin)可以为 loader 带来更多特性。
        7、loader 能够产生额外的任意文件。 
    
    cssLoader执行顺序：
        1、sass-loader|less-loader  ->  css-loader   ->   style-loader
        2、css-loader中将样式序列化，就是转换为string类型
        3、style-loader就是将样式添加到头部标签中的style标签中
        
        
    自定义loader:
        const { getOptions } = require('loader-utils');
        module.exports = function(socue){
            console.log(socue);//* 当前的这个值就是index.js中的内容

            const options = getOptions(this); //* getOptions用于获取配置，中loader下的options中的参数
            
            /**
             * * 我们将index.js中的console.log('aaa')中的aaa进行替换为配置项中的参数name
             */
            const con = socue.match(/console\.log\(['"](.*)['"]\)/);
            return socue.replace(con[1],options.name);
        }

**/

// .ts -> js  .css 使用 css-loader
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
}