मैं वेबपैक निर्माण प्रक्रिया के बाद दो js फ़ाइलों को संयोजित करने का प्रयास कर रहा हूं। लक्ष्य ES6 मॉड्यूल और उसमें विरासत कोड के साथ एक एकल js फ़ाइल प्रदान करना है।

webpack-concat-files-plugin जैसे प्लगइन्स पहले ही आज़मा चुके हैं, लेकिन सफलता नहीं मिली। जो मुझे समझ में आता है, क्योंकि प्लगइन निष्पादित होने पर आउटपुट फाइलें नहीं होती हैं।

एक और विचार आफ्टरकंपाइल हुक में निष्पादित एक छोटी स्क्रिप्ट होगी, जो दो फाइलों के संयोजन को संभालती है। क्या ऐसा कुछ करने का यह सामान्य तरीका है या लक्ष्य प्राप्त करने के अन्य तरीके हैं?

आपकी सहायता के लिए धन्यवाद।


मूल उदाहरण:

module.exports = {
  entry: {
    app: 'app.js',
    legacy: [
      'legacy-1.js',
      'legacy-2.js', 
      // ...
    ]
  },
  output: {
    filename: path.join('dist/js', '[name].js'),
  }
}
2
Robin 22 जिंदा 2021, 18:57

2 जवाब

सबसे बढ़िया उत्तर

सुझाव के अनुसार इसे हल करें:

FileMergeWebpackPlugin.js

const fs = require('fs');

class FileMergeWebpackPlugin {
  constructor({ files, destination, removeSourceFiles }) {
    this.files = files;
    this.destination = destination;
    this.removeSourceFiles = removeSourceFiles;
  }

  apply(compiler) {
    const fileBuffers = [];

    compiler.hooks.afterEmit.tap('FileMergeWebpackPlugin', () => {
      this.files
        .filter(file => fs.existsSync(file))
        .forEach(file => fileBuffers.push(fs.readFileSync(file)))

      fs.writeFileSync(this.destination, fileBuffers.concat(), { encoding: 'UTF-8' })

      if (this.removeSourceFiles) {
        this.files.forEach(file => fs.unlinkSync(file));
      }
    });
  }
}

module.exports = FileMergeWebpackPlugin;

webpack.config.js

const FileMergeWebpackPlugin = require('./FileMergeWebpackPlugin');

module.exports = {
  entry: {
    app: 'app.js',
    legacy: [
      'legacy-1.js',
      'legacy-2.js',
    ]
  },
  output: {
    filename: path.join('dist/js', '[name].js'),
  },
  plugins: [
    new FileMergeWebpackPlugin({
      destination: 'dist/js/bundle.js',
      removeSourceFiles: true,
      files: [
        'dist/js/app.js',
        'dist/js/legacy.js',
      ]
    })
  ]
}

आखिरकार मैं इसे npm पैकेज के रूप में जारी करूंगा, जब मैं ऐसा करूंगा तो पोस्ट को अपडेट करूंगा

3
Robin 25 जिंदा 2021, 13:13

हां।

आप अपना खुद का प्लगइन बना सकते हैं जो emit हुक - पैरामीटर में सक्रिय है इस हुक के लिए संकलन है। आप इस ऑब्जेक्ट से जो हिस्सा देखना चाहते हैं उसे प्राप्त कर सकते हैं और समेकित मूल्य के साथ एक नया हिस्सा बना सकते हैं (या बस एक को दूसरे में जोड़ें)

1
Raz Ronen 23 जिंदा 2021, 01:45