Sortie : la configuration de l'option de sortie peut contrôler la manière dont Webpack écrit les fichiers compilés sur le disque dur. Notez que même si plusieurs points d'entrée peuvent exister, une seule configuration de sortie est spécifiée.
Nous initialisons d'abord un projet npm init , installons webpack et webpack-cli localement, puis créons les dossiers index.html , webpack.config.js et src dans le répertoire racine, et créons un main.js dans le dossier comme fichier d'entrée.
Une fois le travail de préparation terminé, le résultat est comme indiqué sur la figure :
Fonction
main.js
Composant(){
var div=document.createElement('div')
div.innerHTML="Apprenons ensemble la configuration de l'exportation~"
retour div
}
document.body.appendChild(Component()) index.html
<corps>
<script src="./dist/bundle.js"></script>
</body> packag.json
"scripts": {
"test": "echo "Erreur : aucun test spécifié" && exit 1",
"build": "webpack" //Ajouter }, puis la partie configuration webpack.config.js
La configuration de l'option output peut contrôler la manière dont Webpack écrit les fichiers compilés sur le disque dur.
Notez que même s'il peut y avoir plusieurs points入口, une seule configuration输出est spécifiée.
Voici plusieurs concepts de configuration de sortie :
1. Path
path spécifie l'emplacement de la sortie de la ressource et la valeur requise doit être un chemin absolu , tel que :
const chemin=require('chemin')
module.exports={
entrée : './src/main.js',
sortir:{
nom de fichier : 'bundle.js',
//Définissez l'emplacement de sortie de la ressource sur le chemin du répertoire de distribution du projet : path.resolve(__dirname, 'dist')
},
} Après Webpack 4, output.path est par défaut le répertoire dist . Sauf si nous devons le modifier, il n'est pas nécessaire de le configurer séparément, donc s'il s'agit de webpack4 ou supérieur, vous pouvez écrire :
module.exports={
entrée : './src/main.js',
sortir:{
nom de fichier : 'bundle.js',
},
} 2. filename
La fonction de filename est de contrôler le nom de fichier de la ressource de sortie , qui se présente sous la forme d'une chaîne. Ici, je l'appelle bundle.js , ce qui signifie que je veux que les ressources soient sorties dans un fichier appelé bundle.js :
module.exports={
entrée : './src/main.js',
sortir:{
nom de fichier : 'bundle.js',
},
} Après l'empaquetage, comme le montre la figure, un dossier dist sera automatiquement généré avec un fichier bundle.js .
filename peut être non seulement le nom du bundle, mais aussi un chemin relatif.
Peu importe si le répertoire dans le chemin n'existe pas, Webpack créera le répertoire lors de la sortie des ressources, par exemple :
module.exports = {.
sortir: {
nom du fichier : './js/bundle.js',
},
} ; Comme le montre l'image après l'emballage :
Dans un scénario à entrées multiples , nous devons spécifier un nom différent pour chaque bundle généré. Webpack prend en charge l'utilisation d'un formulaire de type langage modèle pour générer dynamiquement des noms de fichiers .
Avant cela, nous créons un nouveau fichier d'entrée danssrc
src
fonction Composant(){
var div=document.createElement('div')
div.innerHTML="Je suis le deuxième fichier d'entrée"
retour div
}
document.body.appendChild(Component()) webpack.config.js :
module.exports = {
entrée:{
principal :'./src/main.js',
vendeur : './src/vender.js'
},
sortir: {
nom de fichier : '[nom].js',
},
} ; Comme le montre l'image après l'emballage :
[name] dans le nom du fichier sera remplacé par le nom du bloc, à savoir principal et fournisseur. Par conséquent, vendor.js et main.js seront générés à la fin
. Si vous souhaitez voir le contenu, vous devez modifier le contenu dans index.html et faire correspondre le chemin d'accès au dernier paquet emballé
<body>.
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [Question] Cela sera nécessaire à ce moment-là. Comment pouvons-nous faire en sorte que
index.htmlajoute automatiquement le bundle généré au HTML pour nous ? Le plug-in HtmlWebpackPlugin peut être utilisé ici. Voir ci-dessous pour plus de détails.
3.
En plus de [name] qui peut faire référence au nom du bloc, il existe plusieurs autres variables de modèle qui peuvent être utilisées dans la configuration du nom de fichier :
Ils peuvent : contrôler le cache client
.[hash] et [chunkhash] sont directement liés au contenu du fragment. S'ils sont utilisés dans le nom du fichier, lorsque le contenu du fragment change, cela peut également entraîner une modification du nom du fichier de ressources. que l'utilisateur téléchargera immédiatement la nouvelle version la prochaine fois qu'il demandera le fichier de ressources sans utiliser le cache local.
[query] peut également avoir un effet similaire, mais cela n'a rien à voir avec le contenu du bloc et doit être spécifié manuellement par le développeur.
4. publicPath
publicPath est un élément de configuration très important, utilisé pour spécifier l'emplacement de la demande des ressources.
Prenons l'exemple du chargement des images
.
composant de fonction() {
//...
var img = nouvelle image ();
myyebo.src = Img //URL de la demande
//...
} {
//...
requête: {
nom : '[nom].[ext]',
chemin de sortie : 'statique/img/',
chemin public : './dist/static/img/'
}
} Comme le montre l'exemple ci-dessus, l'adresse de demande d'image d'origine est ./img.jpg , mais après avoir ajouté publicPath à la configuration, le chemin réel devient ./dist/static/img/img.jpg , les images peuvent donc être obtenues à partir de ressources packagées.
Il existe 3 formes de publicPath :
liées au HTML.
Nous pouvons spécifier publicPath comme chemin relatif du HTML Lors de la demande de ces ressources, le chemin du HTML de la page actuelle sera ajouté au chemin relatif pour former l'URL de la demande réelle.
//Supposons que l'adresse HTML actuelle soit : https://www.example.com/app/index.html //La ressource chargée de manière asynchrone est nommée 1.chunk.js chemin public :"" //-->https://www.example.com/app/1.chunk.js chemin public :"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath :"../assets/" //-->https://www.example.com/assets/1.chunk.js
Lié à l'hôte
Si la valeur de publicPath commence par "/", cela signifie que le publicPath à cette fois commence par Le nom d'hôte de la page actuelle est le chemin de base
// Supposons que l'adresse HTML actuelle soit : https://www.example.com/app/index.html //La ressource chargée de manière asynchrone est nommée 1.chunk.js chemin public : "/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
Lié au CDN
Les deux ci-dessus sont des chemins relatifs Nous pouvons également utiliser le chemin absolu pour configurer publicPath
Ceci. Cette situation se produit généralement lorsque des ressources statiques sont placées sur CDN. Étant donné que son nom de domaine est incohérent avec le nom de domaine de la page actuelle, il doit être spécifié sous la forme d'un chemin absolu
lorsque publicPath démarre sous la forme d'un en-tête de protocole ou d'un relatif. protocole, cela signifie que le chemin actuel est lié au CDN
/ /Supposons que l'adresse html actuelle soit : https://www.example.com/app/index.html //La ressource chargée de manière asynchrone est nommée 1.chunk.js chemin public : "http://cdn.com/" //-->http://cdn.com/1.chunk.js chemin public : "https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath :"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. Entrée unique
La configuration minimale requise pour configurer l'attribut output dans webpack est de définir sa valeur sur un objet, y compris les deux points suivants :
filename est le nom du fichier de sortie.path du répertoire de sortie ciblemodule.exports={
entrée : './src/main.js',
sortir:{
nom de fichier : 'bundle.js',
},
}
//Après le webpack 4, dist sera généré par défaut, donc le chemin est omis ici 2.
Entrées multiples
Si la configuration crée plusieurs "morceaux" distincts, vous devez utiliser des espaces réservés pour vous assurer que chaque fichier a un nom unique.
est utilisé ici. [name] du nom de fichier mentionné.
De plus, si vous souhaitez placer ces ressources dans le dossier spécifié, vous pouvez ajouter path de configuration
module.exports={.
entrée : {
principal : './src/main.js',
fournisseur : './src/vender.js'
},
sortir: {
nom de fichier : '[nom].js',
chemin : __dirname + '/dist/assets' //Spécifiez que le bundle packagé est placé dans le répertoire /dist/assets}
}
// Générer après packaging : ./dist/assets/main.js, ./dist/assets/vender.js Les problèmes restants ci-dessus dans ce chapitre peuvent être résolus en utilisant le plug-in HtmlWebpackPlugin
Installez le plug-
in npm install --save-dev html-webpack-plugin
configurez le plug-in
const HtmlWebpackPlugin=require('html-webpack-plugin') //Chargez le module module.exports = {
entrée:{
principal :'./src/main.js',
vendeur : './src/vender.js'
},
//Ajouter des plugins plugins :[
nouveau HtmlWebpackPlugin({
titre : « gestion des résultats »
})
],
sortir: {
nom de fichier : '[nom].js',
},
}; Une fois l'empaquetage
terminé, vous constaterez qu'un nouveau index.html apparaît dans dist, qui ajoute automatiquement les ressources générées pour nous. Après ouverture, vous constaterez que le navigateur affichera le contenu.
Cela signifie que vous n'aurez pas besoin d'écrire index.html lors de l'initialisation d'un projet à l'avenir.
Le code source peut être obtenu ici :
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. fichiers