如何在不重複使用webpack中的同一個插件的情況下獲得相同的功能

Question

由於我的應用程序中有多個要連接的文件，我不想一次又一次地寫同一個插件。我的方法是在我的應用程序中連接與特定模塊相關的單個文件。請指教。

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

創建一個函數，該函數可以接收一組文件組，這些文件組只是要進行連接的文件。遍歷這些來創建插件實例並返回插件實例數組。您可能還需要使用傳播運算符。

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

在配置的WebPack：

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