Question

我正在尝试构建一个webpack插件，我想在整个编译步骤之前添加一些要处理的文件。我的目的是使用所需的插件和加载器从正常构建过程中添加文件夹中的一些文件。

我意识到，如果我创建一个新资产，我可以这样做：

  SomePlugin.prototype.apply = function(compiler) {
    compiler.plugin("emit", function(compilation, callback) {

      compilation.assets['newAsset.js'] = {
        source: function() {
          return 'content';
        },
        size: function() {
          return 'content'.length;
        }
      };
      callback();
    });
  }

但我不知道如何在要处理的文件列表中添加例如.scss，以便webpack可以根据加载器处理scss文件。

Answer 1

事实证明，使用webpack内部使用的技巧可以做到这一点，假设您想要添加一个名为test.md的降价，与您正在使用的相同内容捆绑在一起，基于EntryOptionPlugin（什么是用于决定如何在条目选项上捆绑deppending）。你可以这样做

    MyPlugin.prototype.apply = function(compiler) {

      compiler.plugin("entry-option", function(context, entry) {
        function itemToPlugin(item, name) {
          if(Array.isArray(item))
            return new MultiEntryPlugin(context, item, name);
          else
            return new SingleEntryPlugin(context, item, name);
        }
        if(typeof entry=== 'string'){
          entry = [entry,__dirname+'/test.md']
        }
        else if (Array.isArray(entry)){
          entry.push(__dirname+'/test.md')
        }
        else{
          entry['SOME_KEY'] = __dirname+'/test.md'
        }
        if( Array.isArray(entry)) {
          compiler.apply(itemToPlugin(entry, "main"));
        } else if(typeof entry === "object") {
          Object.keys(entry).forEach(function(name) {
            compiler.apply(itemToPlugin(entry[name], name));
          });
        }
        return true;
      });
    }

生成的文件将在您的管道上进行填充，并由您已包含的加载器和插件处理。

Webpack在编译trhough插件之前添加文件

1 个答案: