Webpack:Loader学习——功能loader,给输出的文件追加作者信息——给 js 代码添加文本注释

最新推荐文章于 2024-10-18 11:12:30 发布

¡Venceremo

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量250

点赞数

分类专栏： Webpack 文章标签： javascript webpack 学习

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129925104

版权

Webpack 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

该文章展示了如何在Webpack配置中创建一个自定义loader，用于在JavaScript文件顶部追加作者信息。通过`this.getOptions`获取配置选项，并用JSONSchema进行验证。示例中，配置了`banner-loader`并在`options`里指定了作者名字，成功地在打包后的文件中插入了作者信息。

摘要由CSDN通过智能技术生成


module.exports = function (content) {

//追加作者信息
  const prefix = `
    /*
    * Author：xxx
    */
  `;

  return prefix + content;
};

再webpack中引入

    {
        test: /\.js$/,//处理js文件
           loader: "./loaders/banner-loader/index.js",
      },

const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",//根据找到依赖
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "js/[name].js",// filename: 输出文件名
    clean: true,
  },
  module: {//编译记载配置
    rules: [
      //   {
      //   test: /\.js$/,//处理js文件
      //   loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
      // },
      {
        test: /\.js$/,//处理js文件
        // use: ["./loaders/demo/test1","./loaders/demo/test2"],
          // loader: "./loaders/demo/test3",
          // use: ["./loaders/demo/test4","./loaders/demo/test5","./loaders/demo/test6"],
           loader: "./loaders/clean-log-loader",
      },
      {
        test: /\.js$/,//处理js文件
           loader: "./loaders/banner-loader/index.js",
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  
  mode: "development",
};

运行效果：追加成功

追加不同人的名字：是一个可配置项目——使用方法this.getOptions获取normal选择

schema：添加验证规则（schema符合JSON Schema的规则）

"additionalProperties": false //不能追加属性这个options里面只有一个属性

验证规则

引入规则


const schema = require("./schema.json");
module.exports = function (content) {
  // schema对options的验证规则
  // schema符合JSON Schema的规则
  const options = this.getOptions(schema);
//追加作者信息
  const prefix = `
    /*
    * Author: ${options.author}
    */
  `;

  return prefix + content;
};

其中配置文件：报错—验证规则不符合字符串类型只有一个属性

const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",//根据找到依赖
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "js/[name].js",// filename: 输出文件名
    clean: true,
  },
  module: {//编译记载配置
    rules: [
      //   {
      //   test: /\.js$/,//处理js文件
      //   loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
      // },
      {
        test: /\.js$/,//处理js文件
        // use: ["./loaders/demo/test1","./loaders/demo/test2"],
          // loader: "./loaders/demo/test3",
          // use: ["./loaders/demo/test4","./loaders/demo/test5","./loaders/demo/test6"],
           loader: "./loaders/clean-log-loader",
      },
      {
        test: /\.js$/,//处理js文件
           loader: "./loaders/banner-loader/index.js",
           options:{
              author:"老王",
              // age:"34"
           }
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  
  mode: "development",
};