Webpack 在通過插件編譯前添加文件

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 （用於決定如何捆綁取決於在輸入選項上）。 你可以這樣做

    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;
      });
    } 

生成的文件將填充在您的管道上，並由您已經包含的加載器和插件處理。