设计并制作一个自定义的loader 并安装到项目中。功能描述：在所有的JS文件前加上1行注释信息注释信息可自行设计但需包含你自己的名字。

为了创建并安装一个自定义loader，我们需要遵循以下步骤：

1.创建一个新文件夹并初始化npm

mkdir my-loader
cd my-loader
npm init

2.安装必要的依赖项

我们需要安装两个依赖项：

• loader-utils：一个包含有用的loader工具的库。
• acorn：一个JavaScript解析器，用于解析JS代码并生成AST。

npm install loader-utils acorn --save-dev

3.创建并实现我们的自定义loader

在my-loader文件夹中创建一个名为add-comment-loader.js的文件，这是我们的自定义loader。在此文件中，我们通过读取JS文件并在其前面添加注释来实现我们的功能。

const { getOptions } = require("loader-utils");
const acorn = require("acorn");

module.exports = function(source) {
  const options = getOptions(this);
  const ast = acorn.parse(source, {
    sourceType: "module"
  });

  const name = options.name || "anonymous";
  const comment = `/* Created by ${name} */\n`;

  source = comment + source;

  return source;
};

我们使用loader-utils库中的getOptions函数来获取loader的选项。然后，我们使用acorn库解析JS源代码并生成AST。接着，我们添加一个注释行，然后将注释和源代码一起返回。

4.测试我们的自定义loader

我们可以使用webpack-dev-server来测试loader。首先，让我们在项目中创建一个新的文件夹（例如，my-app/src）来存储JS文件。在该文件夹中创建一个hello.js文件：

console.log("Hello, World!");

接下来，我们需要在项目中的webpack.config.js文件中配置我们的自定义loader。我们可以通过使用resolveLoader.modules配置项来告诉webpack从我们的本地npm模块目录中查找loader。

const path = require('path');

module.exports = {
  // ...
  resolveLoader: {
    modules: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'my-loader')]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'add-comment-loader',
            options: {
              name: 'John Doe'
            }
          }
        ]
      }
    ]
  }
};

现在，我们可以使用webpack-dev-server来编译并运行我们的代码。在项目根目录中运行以下命令：

npx webpack serve --mode development

webpack将编译我们的JS文件，并在编译后的代码前面添加我们的注释行。我们可以在浏览器控制台中看到以下输出：

/* Created by John Doe */
console.log("Hello, World!");
``