Résumé des problèmes liés au webpack2 et au packaging des modules-js tutoriel-php.cn

Résumé des problèmes liés au webpack2 et au packaging des modules

巴扎黑

Libérer： 2017-08-11 10:49:14

original

1103 Les gens l'ont consulté

Cet article présente principalement le guide du novice (résumé) sur le webpack2 et l'empaquetage de modules. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Webpack est devenu l'un des outils les plus importants du développement Web moderne. Il s'agit d'un outil d'empaquetage de modules pour JavaScript, mais il peut également convertir toutes les ressources frontales, telles que HTML et CSS, et même des images. Il vous donne un meilleur contrôle sur le nombre de requêtes HTTP effectuées par votre application et vous permet d'utiliser des fonctionnalités d'autres ressources (telles que Jade, Sass et ES6). webpack vous permet également de télécharger facilement des packages depuis npm.

Cet article s'adresse principalement aux étudiants qui découvrent Webpack et présentera l'installation et la configuration initiales, les modules, les chargeurs, les plug-ins, le fractionnement de code et le remplacement de modules à chaud.

Avant de continuer à étudier le contenu suivant, vous devez vous assurer que Node.js a été installé sur votre ordinateur.

Configuration initiale

Utilisez npm pour initialiser un nouveau projet et installer webpack :

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack@beta --save-dev
mkdir src
touch index.html src/app.js webpack.config.js

Copier après la connexion

Écrivez les fichiers suivants :

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Hello webpack</title>
 </head>
 <body>
  <p id="root"></p>
  <script src="dist/bundle.js"></script>
 </body>
</html>

Copier après la connexion

// src/app.js
const root = document.querySelector(&#39;#root&#39;)
root.innerHTML = `<p>Hello webpack.</p>`

Copier après la connexion

// webpack.config.js
const webpack = require(&#39;webpack&#39;)
const path = require(&#39;path&#39;)

const config = {
 context: path.resolve(__dirname, &#39;src&#39;),
 entry: &#39;./app.js&#39;,
 output: {
  path: path.resolve(__dirname, &#39;dist&#39;),
  filename: &#39;bundle.js&#39;
 },
 module: {
  rules: [{
   test: /\.js$/,
   include: path.resolve(__dirname, &#39;src&#39;),
   use: [{
    loader: &#39;babel-loader&#39;,
    options: {
     presets: [
      [&#39;es2015&#39;, { modules: false }]
     ]
    }
   }]
  }]
 }
}

module.exports = config

Copier après la connexion

La configuration ci-dessus est un point de départ courant. Elle indique à webpack de compiler et de sortir le fichier d'entrée src/app.js dans le fichier /dist/bundle.js, et d'utiliser babel pour convertir tous les .js fichiers d'ES2015 vers ES5.

Afin de le convertir en fichiers JS au format ES5, nous devons installer trois packages : babel-core, webpackloader babel-loader et preset babel-preset-es2015. Utilisez { modules: false } pour que Tree Shaking supprime les exportations inutilisées du fichier package afin de réduire la taille du fichier.

npm install babel-core babel-loader babel-preset-es2015 --save-dev

Copier après la connexion

Enfin, remplacez la section scripts de package.json par ce qui suit :

"scripts": {
 "start": "webpack --watch",
 "build": "webpack -p"
},

Copier après la connexion

L'exécution de npm start dans la ligne de commande démarrera webpack en mode surveillance, qui recompilera bundle.js lorsque le fichier .js dans le répertoire src changera. La sortie dans la console affiche les informations sur les fichiers empaquetés. Il est important de faire attention au nombre et à la taille des fichiers empaquetés.

Vous verrez désormais "Bonjour webpack". lorsque vous chargerez la page index.html dans votre navigateur.

open index.html

Ouvrez le fichier dist/bundle.js pour voir ce que webpack a fait. Le haut est le code de démarrage du module de webpack, et le bas est notre module. Jusqu’à présent, vous n’en aurez peut-être pas une profonde impression. Mais vous pouvez maintenant commencer à écrire des modules ES6 et webpack générera des fichiers groupés qui fonctionnent dans tous les navigateurs.

Utilisez Ctrl + C pour arrêter webpack et exécutez npm run build pour compiler notre bundle.js en mode production.

Notez que la taille du fichier compressé a été réduite de 2,61 Ko à 585 octets. Jetez un autre coup d'œil au fichier dist/bundle.js et vous verrez beaucoup de code illisible car nous avons utilisé UglifyJS pour le réduire. De cette façon, nous pouvons utiliser moins de code pour obtenir le même effet qu’auparavant.

Modules

Un bon webpacker sait utiliser des modules JavaScript dans différents formats, les deux plus connus sont :

Déclaration d'importation ES2015
Déclaration CommonJS require()

Nous pouvons tester des modules dans ces formats en installant et en important lodash.

npm install lodash --save

Copier après la connexion

// src/app.js
import {groupBy} from &#39;lodash/collection&#39;

const people = [{
 manager: &#39;Jen&#39;,
 name: &#39;Bob&#39;
}, {
 manager: &#39;Jen&#39;,
 name: &#39;Sue&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Shirley&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Terrence&#39;
}]
const managerGroups = groupBy(people, &#39;manager&#39;)

const root = document.querySelector(&#39;#root&#39;)
root.innerHTML = `<pre class="brush:php;toolbar:false">${JSON.stringify(managerGroups, null, 2)}

Copier après la connexion

Exécutez npm start démarrez webpack et actualisez index.html, vous pouvez voir un tableau regroupés par gestionnaire.

Déplaçons ce tableau dans son propre module people.js.

// src/people.js
const people = [{
 manager: &#39;Jen&#39;,
 name: &#39;Bob&#39;
}, {
 manager: &#39;Jen&#39;,
 name: &#39;Sue&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Shirley&#39;
}, {
 manager: &#39;Bob&#39;,
 name: &#39;Terrence&#39;
}]

export default people

Copier après la connexion

Nous pouvons facilement l'importer en utilisant des chemins relatifs dans app.js.

// src/app.js
import {groupBy} from &#39;lodash/collection&#39;
import people from &#39;./people&#39;

const managerGroups = groupBy(people, &#39;manager&#39;)

const root = document.querySelector(&#39;#root&#39;)
root.innerHTML = `<pre class="brush:php;toolbar:false">${JSON.stringify(managerGroups, null, 2)}

Copier après la connexion

Remarque : Une importation sans chemin relatif comme lodash/collection importe un module installé dans /node_modules. Votre propre module a besoin d'un ./people similaire. 🎜> chemin relatif, vous pouvez l'utiliser pour les distinguer.

Loader

Comme nous l'avons déjà présenté, vous pouvez configurer un chargeur comme babel-loader pour indiquer à Webpack quoi faire lorsqu'il rencontre des importations de différents types de fichiers. Comment faire. fais-le. Vous pouvez combiner plusieurs chargeurs et les appliquer à de nombreuses conversions de fichiers. L'importation de fichiers .sass en JS est un très bon exemple.

Sass

Cette conversion implique trois chargeurs distincts et node-sass bibliothèques :

npm install css-loader style-loader sass-loader node-sass --save-dev

Copier après la connexion

Ajoutez de nouvelles règles pour les fichiers .scss dans le fichier de configuration.

// webpack.config.js
rules: [{
 test: /\.scss$/,
 use: [
  &#39;style-loader&#39;,
  &#39;css-loader&#39;,
  &#39;sass-loader&#39;
 ]
}, {
 // ...
}]

Copier après la connexion

Remarque : La modification de l'une des règles de chargement dans webpack.config.js à tout moment nécessite de redémarrer la construction en utilisant Ctrl + C et npm start.

La séquence de chargement est traitée dans l'ordre inverse :