javascript - Πώς να αποθηκεύσετε τα αρχεία εξόδου του WebPack σε άλλο μέρος αυτόματα αφού ολοκληρωθεί η κατασκευή του έργου μου


Έχουμε ένα έργο SDK το οποίο εξαρτάται από άλλα δύο έργα.

Όταν θέλουμε να δημιουργήσουμε ολόκληρη την εφαρμογή, πρώτα πρέπει να δημιουργήσουμε το έργο SDK και να το ανεβάσουμε. Στη συνέχεια, μπορούμε να δημιουργήσουμε άλλα δύο έργα αφού τρέξουμε npm install.

Αυτή τη φορά θέλω να προσθέσω ένα σενάριο για προγραμματιστή. Όταν εκτελώ το σενάριο σε ένα έργο SDK, μπορώ να αποθηκεύσω τα αρχεία εξόδου που δημιουργήθηκαν σε άλλο έργο στο node_modules.

Ορίστε ο κώδικάς μου.

Αρχείο package.json:

{
  ...
  "scripts": {
    "build:dev": "webpack --mode=development",
    ...
  }
  ...
}

Αρχείο webpack.config.js:

let config = {
  ...
  module: {
    rules: [
      {
        test:/\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
  ...
}

module.exports = (env, argv) => {
  if(argv.mode === 'development') {
    // We put all the projects in one repo
    config.output.path = path.resolve(__dirname,'../another-project/node_modules/sdk/dist/bundle')
  }
}

Και τέλος ορίζουμε το outDir στο tsconfig.json.

Το πρόβλημα είναι:

  • Πώς να αλλάξετε τη διαδρομή εξόδου για τα αρχεία δήλωσης TypeScript μέσω των επιχειρημάτων του WebPack;
  • Πώς να αποθηκεύσετε όλα τα αρχεία σε δύο μέρη ταυτόχρονα;

Λύνω το τελευταίο πρόβλημα χρησιμοποιώντας webpack -env xxx && webpack -env xxx. Απλώς τρέχω το σκριπτ δύο φορές, ίσως κάποιος έχει καλύτερη ιδέα.

Τώρα μόνο μία ερώτηση:

  • Πώς να ορίσετε δυναμικά τη διαδρομή αρχείου εξόδου για αρχεία δήλωσης TypeScript;

Απάντηση #1

Αρχείο webpack.config.js:

let config = {
  ...,
  module: {
    rules: [
      {
        test:/\.tsx?$/,
        use: 'ts-loader',
        options: {
          configFile: "tsconfig.server.json"
        }
      }
    ]
  },
  ...
}

Τότε μπορώ να αλλάξω το configFlie στο module του webpack.

Απάντηση #2

https://webpack.js.org/configuration/output/

module.exports = {
...
  output: {
    filename: "lib.js"
  }
...

Η ρύθμιση του φακέλου εξόδου στο TypeScript δεν θα σας βοηθήσει γιατί η webpack είναι αυτή που είναι υπεύθυνη για τη μεταγλώττιση και θα χρησιμοποιήσει το TypeScript για μεταγλώττιση μόνο αφού παράγει τα αρχεία η ίδια.