Wie bekomme ich dieselbe Funktionalität, ohne das gleiche Plugin im Webpack zu wiederholen?

Question

Da ich viele Dateien in meiner Anwendung verketten muss, möchte ich nicht immer wieder dasselbe Plugin schreiben. Mein Ansatz besteht darin, einzelne Dateien in Verbindung mit dem spezifischen Modul in meiner App zu verketten. Bitte beraten.

const ConcatPlugin = require('webpack-concat-plugin'); 

new ConcatPlugin({ 
    useHash: true, // md5 file 
    sourceMap: true, // generate sourceMap 
    options: { 
     process: function(src, filepath) { 
      src = src.replace('"use strict";',''); 
      return '$(function() {\n' + src + '\n});'; 
     } 
    }, 
    fileName: 'js/react/_react.es6.do-not-edit.js', 
    filesToConcat: [ 
     './js/react/promises.js', 
     './js/react/comps.js', 
     './js/react/press-release-component.js' 
    ] 
}), 
new ConcatPlugin({ 
    useHash: true, // md5 file 
    sourceMap: true, // generate sourceMap 
    options: { 
     process: function(src, filepath) { 
      src = src.replace('"use strict";',''); 
      return '$(function() {\n' + src + '\n});'; 
     } 
    }, 
    fileName: globalPath.theme + '/js/script.min.js', 
    filesToConcat: [ 
     './js/languages.min.js', 
     './js/_script.min.do-not-edit.js', 
     './js/_react.es5.min.do-not-edit.js' 
    ] 
}), 
new ConcatPlugin({ 
    useHash: true, // md5 file 
    sourceMap: true, // generate sourceMap 
    options: { 
     process: function(src, filepath) { 
      src = src.replace('"use strict";',''); 
      return '$(function() {\n' + src + '\n});'; 
     } 
    }, 
    fileName: globalPath.theme + '/js/script.js', 
    filesToConcat: [ 
     './js/script.js', 
     './js/_react.es5.do-not-edit.js' 
    ] 
}), 

Answer 1

Erstellen Sie eine Funktion, die ein Array von Dateigruppen aufnehmen kann, bei denen es sich nur um die Dateien handelt, die erfasst werden sollen. Iterieren durch diese, um Plugin-Instanzen zu erstellen und das Array von Plugin-Instanzen zurückzugeben. Möglicherweise müssen Sie auch den Spread-Operator verwenden.

let appFileGroups = [ 
     [ 
      './js/script.js', 
      './js/_react.es5.do-not-edit.js' 
     ], 
     [ 
      './js/script.js', 
      './js/_react.es5.do-not-edit.js' 
     ], 
    ]; 



function concatFileGroups(fileGroups) { 
    return fileGroups.map(fileGroup => { 
    new ConcatPlugin({ 
     useHash: true, // md5 file 
     sourceMap: true, // generate sourceMap 
     options: { 
      process: function(src, filepath) { 
       src = src.replace('"use strict";',''); 
       return '$(function() {\n' + src + '\n});'; 
      } 
     }, 
     fileName: globalPath.theme + '/js/script.js', 
     filesToConcat: fileGroup 
     }) 
    } 
} 

In webpack config:

plugins : [ 
    concatFileGroups(appFileGroups), 
    // if that doesnt work try this 
    //...concatFileGroups(appFileGroups), 
    // remaining plugins