Πώς να ρυθμίσετε το Webpack 4 με VueJS: έναν πλήρη οδηγό

webpack & λογότυπα Vue

Μόλις ξεκίνησα μια νέα δουλειά σε μια νεαρή εκκίνηση που αναπτύσσει το front-end με τη χρήση του VueJS. Ως προγραμματιστής με γωνιακό υπόβαθρο, άρχισα πολύ δύσπιστος. Ωστόσο, έχω μεγαλώσει για να εκτιμήσω το VueJS για την εύκολη κατανόηση και χρήση του. Για τους τελευταίους 2 μήνες, έχω εργαστεί σε πολλά μέρη της εφαρμογής που μου επέτρεψαν να αναπτύξω πολύ τις γνώσεις μου για το VueJS. Μία από τις τελευταίες μου ευθύνες ήταν να αναβαθμίσω το webpack για να βελτιστοποιήσω το ταμπλό της εταιρείας.

Σε αυτό το άρθρο, θα περιγράψω ένα βήμα προς βήμα οδηγό σχετικά με τον τρόπο ρύθμισης της διαδικτυακής συσκευασίας για τη βελτιστοποίηση οποιασδήποτε εφαρμογής VueJS.

Εγκατάσταση εξαρτήσεων έργου

Δημιουργήστε το αρχείο package.json και ξεκινήστε εγκαθιστώντας εξαρτήσεις Vue και webpack.

"εξαρτήσεις": {
  "@ babel / polyfill": "~ 7,2",
  "vue": "~ 2.6",
  "vue-router": "~ 3.0"
},
"devDependencies": {
  "@babel / core": "~ 7,2",
  "@babel / plugin-proposal-class-ιδιότητες": "~ 7.3",
  "@ babel / plugin-proposal-decorators": "~ 7.3",
  "@babel / plugin-proposal-json-string": "~ 7,2",
  "@babel / plugin-syntax-dynamic-import": "~ 7,2",
  "@ babel / plugin-syntax-import-meta": "~ 7.2",
  "@ babel / preset-env": "~ 7.3",
  "babel-loader": "~ 8.0",
  "συμπίεση-webpack-plugin": "~ 2.0",
  "cross-env": "~ 5.2",
  "css-φορτωτής": "~ 0.28",
  "φιλικό-λάθη-webpack-plugin": "~ 1.7",
  "html-webpack-plugin": "~ 3.2",
  "mini-css-extract-plugin": "~ 0.5",
  "κόμβος-sass": "~ 4.11",
  "optimize-css-assets-webpack-plugin": "~ 3.2",
  "sass-loader": "~ 7.1",
  "uglifyjs-webpack-plugin": "~ 1.2",
  "vue-loader": "~ 15.6",
  "vue-style-loader": "~ 4.1",
  "vue-template-compiler": "~ 2.6",
  "webpack": "~ 4.29",
  "webpack-δέσμη-αναλυτής": "~ 3.0",
  "webpack-cli": "~ 3.2",
  "webpack-dev-server": "~ 3.1",
  "webpack-hot-middleware": "~ 2.24",
  "webpack-συγχώνευση": "~ 4.2"
}}
webpack & λογότυπα Babel

Τι είναι η Βαβέλ; Σύμφωνα με την επίσημη ιστοσελίδα της Babel:

Η Babel είναι μια εργαλειομηχανή που χρησιμοποιείται κυρίως για τη μετατροπή του κώδικα ECMAScript 2015+ σε μια συμβατή έκδοση του JavaScript σε παλιές και παλαιότερες περιήγησης ή περιβάλλοντα. Εδώ είναι τα κύρια πράγματα που μπορεί να κάνει η Babel για σας:
- Σύνταξη μετασχηματισμού
- Χαρακτηριστικά Polyfill που λείπουν στο περιβάλλον στόχο (μέσω @ babel / polyfill)
- Μετασχηματισμοί πηγαίου κώδικα (codemods)
- Κι αλλα!
Η Babel είναι ένας μεταγλωττιστής (πηγαίος κώδικας => κώδικας εξόδου). Όπως πολλοί άλλοι μεταγλωττιστές, τρέχει σε 3 στάδια: ανάλυση, μετασχηματισμός και εκτύπωση.
Τώρα, από το κουτί η Βαβέλ δεν κάνει τίποτα. Βασικά ενεργεί όπως const babel = code => code; αναλύοντας τον κώδικα και στη συνέχεια δημιουργώντας ξανά τον ίδιο κωδικό. Θα χρειαστεί να προσθέσετε πρόσθετα για τη Babel για να κάνετε οτιδήποτε.
Αντί για μεμονωμένα πρόσθετα, μπορείτε επίσης να ενεργοποιήσετε ένα σύνολο από plugins σε προκαθορισμένη ρύθμιση.

.babelrc configuration

{
  "προεπιλογές": [
    [
      "@babel / preset-env",
      {
        "ενότητες": ψευδείς,
        "στόχοι": {
          "φυλλομετρητές": ["> 1%", "τελευταίες 2 εκδόσεις", "όχι ie <= 8", "ie> = 11"]
        }}
      }}
    ]
  ],
  "plugins": [
    "@babel / plugin-syntax-dynamic-import",
  ]
}}
  • @ babel / preset-env σας επιτρέπει να χρησιμοποιήσετε την τελευταία έκδοση javascript χωρίς να ανησυχείτε ποια συντακτική μετασχηματίζεται τελικά για τα περιβάλλοντά σας-στόχο.
  • plugin-syntax-dynamic-import είναι απαραίτητη για να μπορέσετε να χρησιμοποιήσετε τεμπέληνη φόρτωση. Διαφορετικά, το webpack δεν θα μεταγλωττίσει αυτή τη σύνταξη const AppHome = () => import ("@ / components / AppHome");

Η βάση: κοινή διαμόρφωση ιστού

Αυτή η ενότητα θα καθορίσει ρυθμίσεις που είναι κοινές σε όλα τα περιβάλλοντα της εφαρμογής σας: αρχεία καταχώρησης, plugins και φορτωτές.

Καταχώρηση - Ένα σημείο εισόδου υποδεικνύει ποια μονάδα webpack πρέπει να χρησιμοποιήσει για να ξεκινήσει να δημιουργεί το γράφημα εσωτερικής εξάρτησης. Το Webpack θα υπολογίσει ποιες άλλες ενότητες και βιβλιοθήκες εξαρτάται από το σημείο εισόδου (άμεσα και έμμεσα). Παρακάτω υπάρχουν 2 διαφορετικά σημεία εισόδου: polyfill και main

είσοδος: {
  polyfill: '@ babel / polyfill',
  main: helpers.grot ('src', 'main'),
}}

Επίλυση - Αυτές οι επιλογές αλλάζουν τον τρόπο επίλυσης των ενοτήτων.

επίλυση: {
  επεκτάσεις: ['.js', '.vue'],
  ψευδώνυμο: {
    'vue $': είναιDev; 'vue / dist / vue.runtime.js': 'vue / dist / vue.runtime.min.js',
    '@': helpers.gr ('src')
  }}
}}
  • επεκτάσεις: επιτρέψτε στους χρήστες να αποφεύγουν να γράφουν την επέκταση κατά την εισαγωγή

Αντί της γραφής:

εισαγωγή AppHome από "../../components/AppHome.vue";

Μπορείς να γράψεις:

εισαγωγή AppHome από "@ / components / AppHome";
  • alias: επιτρέπει να εισάγετε ή να απαιτήσετε πιο εύκολα τις ενότητες

Αντί να χρησιμοποιείτε σχετικές διαδρομές κατά την εισαγωγή ...

εισαγωγή AppHome από "../../components/AppHome";

... μπορείτε να χρησιμοποιήσετε το ψευδώνυμο που μόλις δημιουργήθηκε

εισαγωγή AppHome από "@ / components / AppHome";

Στο φάκελο dist / φάκελο του πακέτου vue, θα βρείτε πολλά διαφορετικά build του Vue.js. Ακολουθεί μια επισκόπηση των διαφορών μεταξύ τους.

Επεξήγηση διαφορετικών δομών

Στην περίπτωσή μας, το vue έχει αντιστοιχιστεί στο vue.runtime.js. αναφορές χρόνου εκτέλεσης στον κώδικα που είναι υπεύθυνος για τη δημιουργία στιγμιότυπων Vue, την απόδοση και την επιδιόρθωση του εικονικού DOM, κ.λπ ... Βασικά, τα πάντα μείον τον μεταγλωττιστή. Είναι σημαντικό να κατανοήσουμε αυτήν την έννοια, διότι πάντα θέλουμε να στείλουμε λιγότερα KB στο πρόγραμμα περιήγησης.

Για να κάνετε την εφαρμογή να λειτουργεί σωστά χωρίς τον μεταγλωττιστή, φροντίστε να μην δηλώνετε ποτέ ένα στοιχείο με πρότυπα συμβολοσειράς ...

// αυτό απαιτεί τον μεταγλωττιστή
νέο Vue ({
    πρότυπο: '
{{hi}} ' })

... και χρησιμοποιήστε μια λειτουργία rendering:

// αυτό δεν απαιτεί τον μεταγλωττιστή
νέο Vue ({
  (h) {
    επιστροφή h ('div', this.hi)
  }}
})

Φορτωτές - Το webpack επιτρέπει τη χρήση φορτωτών για την προεπεξεργασία των αρχείων.

ενότητα: {
    κανόνες: [
      {
        δοκιμή: /\.vue$/,
        φορτωτής: 'vue-loader',
        περιλαμβάνουν: [helpers.root ('src')]
      },
      {
        δοκιμή: /\.js$/,
        φορτωτής: "φορτωτής βάλε",
        περιλαμβάνουν: [helpers.root ('src')]
      },
      {
        δοκιμή: /\.css$/,
        χρήση: [
          isDev; 'vue-style-loader': MiniCSSExtractPlugin.loader,
          {φορτωτής: 'css-loader', επιλογές: {sourceMap: isDev}},
        ]
      },
      {
        δοκιμή: /\.scss$/,
        χρήση: [
          isDev; 'vue-style-loader': MiniCSSExtractPlugin.loader,
          {φορτωτής: 'css-loader', επιλογές: {sourceMap: isDev}},
          {loader: 'sass-loader', επιλογές: {sourceMap: isDev}}
        ]
      },
      {
        δοκιμή: /\.sass$/,
        χρήση: [
          isDev; 'vue-style-loader': MiniCSSExtractPlugin.loader,
          {φορτωτής: 'css-loader', επιλογές: {sourceMap: isDev}},
          {loader: 'sass-loader', επιλογές: {sourceMap: isDev}}
        ]
      }}
    ]
  }}

Μερικοί φορτωτές webpack είναι αρκετά πρότυπο:

  • Τα αρχεία .html φορτώνονται με html-loader
  • Τα αρχεία .vue φορτώνονται με vue-loader
  • Τα αρχεία .js φορτώνονται με φορτωτή babel

Ο τρόπος φόρτωσης των στυλ είναι διαφορετικός ανάλογα με το αν εργάζεστε στην ανάπτυξη ή στην παραγωγή:

  • Τα αρχεία .css .scss και .sass φορτώνονται με vue-style-loader σε λειτουργία ανάπτυξης και MiniCSSExtractPlugin.loader σε λειτουργία παραγωγής. Ένα δύσκολο σημείο είναι ότι τα αρχεία sass φορτώνονται χρησιμοποιώντας δύο φορτωτές: sass-loader και css-loader.
  • Το sourceMap έχει οριστεί ως αληθές μόνο κατά τη διάρκεια της ανάπτυξης. Αυτό είναι πολύ σημαντικό για να γίνει ευκολότερο το σβήσιμο των σφαλμάτων αργότερα.

Plugins - Η επιλογή plugins χρησιμοποιείται για την προσαρμογή της διαδικασίας δημιουργίας webpack με διάφορους τρόπους.

plugins: [
    νέα VueLoaderPlugin (),
    νέο HtmlPlugin ({
      πρότυπο: 'index.html',
      chunksSortMode: 'εξάρτηση'
    })
]