English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Après avoir appris le tutoriel de niveau professionnel de webpack, je pense qu'il est peut-être conçu spécifiquement pour les applications web uniques, par exemple webpack+react, webpack+vue, etc., peuvent résoudre divers problèmes de chargement et d'empaquetage des ressources. Même le CSS peut être empaqueté dans le JS et ajouté dynamiquement au document DOM.
Si nous voulons un site web ordinaire multipage, avec des CSS indépendants et des JS chargés en tant que modules ?
Adresse du projet :webpackDemo_jb51.rar
Initialisation du projet, installation des dépendances
package.json
"devDependencies": {
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
Structure des dossiers (j'utilise le cadre express, d'autres selon les besoins personnels)
- webpackDemo
- src #Répertoire de développement du code
- css #Répertoire CSS, organisé selon les pages (modules), commun, tiers
+ page
+ common
+ lib
- js #Scripts JS, organisés selon page, components
+ page
+ components
+ template #Modèle HTML
- node_modules #Modules nodejs utilisés
- public #Fichiers statiques express
- dist #Répertoire de sortie de compilation et d'empaquetage de webpack, pas besoin de créer de répertoire, webpack peut le générer automatiquement selon la configuration
+ css
+ js
+ img #Ressources d'images
+ view #Fichiers statiques express (répertoire de sortie de compilation et d'empaquetage de webpack)
package.json #Configuration du projet
webpack.config.js #Configuration de webpack
Développement de page
Dans src/js/Créez un fichier index.js dans le répertoire page, dans src/Créez un fichier index.html dans le répertoire view. Le nom du fichier JS d'entrée et du fichier modèle doivent correspondre.
index.html contenu suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--
Description : dans le head, il n'est pas nécessaire d'inclure de css ni de facicon, webpack réalisera automatiquement le chargement demandé ou générera des balises style en fonction des exigences du fichier JS d'entrée
-->
</head>
<body>
<!--
Description : dans le body, il n'est pas nécessaire d'inclure de fichiers JS individuels, webpack réalisera automatiquement le chargement demandé ou générera des balises script en fonction du fichier JS d'entrée, et peut également générer les valeurs hash correspondantes
-->
</body>
</html>
C'est un simple modèle HTML de ce genre, sans inclure de CSS et de JS, en utilisant webpack pour l'assembler, il peut nous aider à inclure automatiquement.
index.js contenu suivant :
//Inclusion de css
require("../../css/lib/base.css");
require("../../css/page/index.scss");
$('body').append('<p class="text">index</p>');
page1.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>page1</title> </head> <body> </body> </html>
page1.js:
//Inclusion de css
require("../../css/lib/base.css");
require("../../css/page/page1.less");
$('body').html('page1');
Configuration webpack (je utilise le cadre express, d'autres selon les besoins personnels)
var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin插件，
Avec cela, vous pouvez extraire vos styles dans un fichier css distinct.
Maman n'a plus à s'inquiéter que les styles ne soient pas inclus dans le fichier js.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin, un plugin essentiel pour générer des fichiers HTML dans webpack.
Pour plus d'informations, consultez ici: https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //Configuration du fichier d'entrée, écrivez-en plusieurs s'il y en a plusieurs
index: './src/js/page/index.js',
page1: './src/js/page/page1.js'
},
output: {
path: path.join(__dirname, './public/dist/'), //configuration du répertoire de sortie, le chemin des ressources telles que les modèles, les styles, les scripts et les images est par rapport à celui-ci
publicPath: '/dist/', //chemin du serveur pour les ressources telles que les modèles, les styles, les scripts et les images
filename: 'js/[name].js', //configuration générée pour le JavaScript principal de chaque page
chunkFilename: 'js/[id].chunk.js' //configuration générée par chunk
},
module: {
loaders: [ //Chargement du chargeur, concernant la configuration des paramètres de chaque chargeur, vous pouvez le rechercher vous-même.
{
test: /.css$/,
//Configuration de l'extraireur et du chargeur de css.'-loader' peut être omis
loader: ExtractTextPlugin.extract('style-loader', 'css-loader)
test: /.less$/,
//Configuration de l'extraireur et du chargeur de less. Interrogatif ! il est nécessaire d'expliquer cela.
//Appelés en ordre de droite à gauche, les chargeurs less, css sont appelés en cascade, la sortie de l'un est l'entrée de l'autre
//Vous pouvez également développer votre propre loader. Concernant l'écriture du loader, vous pouvez le rechercher sur Google.
loader: ExtractTextPlugin.extract('css!less')
test: /\.scss$/,
//Configuration de l'extraireur et du chargeur de scss. Interrogatif ! il est nécessaire d'expliquer cela.
//Appelés en ordre de droite à gauche, les chargeurs scss, css sont appelés en cascade, la sortie de l'un est l'entrée de l'autre
//Vous pouvez également développer votre propre loader. Concernant l'écriture du loader, vous pouvez le rechercher sur Google.
loader: ExtractTextPlugin.extract('css!scss')
//Chargeur de modèle HTML, capable de traiter les ressources statiques référencées, paramètres de configuration par défaut attrs=img:src, traitant les ressources de référence src des images
//Par exemple, si vous configurez, attrs=img:src img:data-src peut également traiter data-Les ressources mentionnées dans src peuvent être traitées ensemble
test: /.html$/,
loader: "html?attrs=img:src img:data-src"
//Chargeur de fichiers, traitant les ressources statiques de fichiers
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]
//Chargeur d'images, similaire à file-Loader, plus adapté aux images, peut convertir les images plus petites en base64，réduire les demandes http
//Conformément à la configuration suivante, convertir les images inférieures à8192Convertir les images de byte en base64Code
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]),
},
plugins: [
new webpack.ProvidePlugin({ //Charger jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons', // Extraire les modules communs, générer un chunk nommé `commons`
chunks: ['index','page1], //Extraire quelles parties communes des modules
minChunks: 2 // Extraire au moins2Partie commune de plusieurs modules
}),
new ExtractTextPlugin('css/[name].css'), //Utiliser le tag link pour charger le css et configurer le chemin, par rapport à publickPath configuré dans output
//HtmlWebpackPlugin, la configuration liée à la génération de modèle, pour chaque configuration d'une page, écrivez-en plusieurs si nécessaire
new HtmlWebpackPlugin({ //Insérer des css en fonction du modèle/Générer l'HTML final à partir de js, etc.
favicon: '.',/src/favicon.ico', //Le chemin du favicon, intégré par webpack, peut également générer une valeur de hash
filename: '../../views/index.html', //chemin d'-stockage de l'HTML généré, par rapport à path
template: '.',/src/template/index.html', //chemin du template HTML
inject: 'body', //emplacement d'insertion du js, true/'head'/'body'/false
hash: true, //Générer des valeurs hash pour les ressources statiques
chunks: ['commons', 'index'],//Les chunks à importer, si non configuré, importera les ressources de toutes les pages
minify: { //Compresser le fichier HTML
removeComments: true, //Supprimer les commentaires HTML
collapseWhitespace: false //Supprimer les espaces blancs et les retours à la ligne
}
}),
new HtmlWebpackPlugin({ //Insérer des css en fonction du modèle/Générer l'HTML final à partir de js, etc.
favicon: '.',/src/favicon.ico', //Le chemin du favicon, intégré par webpack, peut également générer une valeur de hash
filename: '../../views/page1.html', //chemin d'-stockage de l'HTML généré, par rapport à path
template: '.',/src/template/page1.html', //chemin du template HTML
inject: true, //emplacement d'insertion du js, true/'head'/'body'/false
hash: true, //Générer des valeurs hash pour les ressources statiques
chunks: ['commons', 'list'],//Les chunks à importer, si non configuré, importera les ressources de toutes les pages
minify: { //Compresser le fichier HTML
removeComments: true, //Supprimer les commentaires HTML
collapseWhitespace: false //Supprimer les espaces blancs et les retours à la ligne
}
}
// new webpack.HotModuleReplacementPlugin(), //Chargement hot
],
//Utilisez webpack-dev-server, pour améliorer l'efficacité du développement
// devServer: {
// contentBase: '.',/',
// host: 'localhost',
// port: 9090, //Par défaut8080
// inline: true, //Peut surveiller les changements de js
// hot: true, //Redémarrage rapide
// }
};
Bien, après avoir configuré ce qui précède, exécutez la commande de paquetage webpack pour terminer le paquetage du projet.
Hash: e6219853995506fd132a
Version: webpack 1.14.0
Time: 1338ms
Asset Size Chunks Chunk Names
js/index.js 457 octets 0 [emitted] index
js/page1.js 392 octets 1 [emitted] page1
js/commons.js 306 kB 2 [emitted] commons
css/index.css 62 octets 0 [emitted] index
css/page1.css 62 octets 1 [emitted] page1
css/commons.css 803 octets 2 [emitted] commons
favicon.ico 1.15 kB [emitted]
../../vue/index.html 496 octets [emitted]
../../vue/page1.html 499 octets [emitted]
[0] ./src/js/page/index.js 170 octets {0} [built]
[0] ./src/js/page/page1.js 106 octets {1} [built]
+ 7 modules cachés
html des enfants-webpack-plugin pour "../../vue/page1.html":
+ 1 modules cachés
html des enfants-webpack-plugin pour "../../vue/index.html":
+ 1 modules cachés
Extraction des enfants-text-webpack-plugin:
+ 2 modules cachés
Extraction des enfants-text-webpack-plugin:
+ 2 modules cachés
Extraction des enfants-text-webpack-plugin:
+ 2 modules cachés
Ensuite, allez dans le répertoire views pour vérifier le fichier index.html généré, comme suit :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="shortcut icon" href="/dist/favicon.ico" rel="external nofollow" ><link href="/dist/css/commons.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"><link href="/dist/css/index.css?e6219853995506fd132a" rel="external nofollow" rel="stylesheet"></head> <body> <script type="text/javascript" src="/dist/js/commons.js?e6219853995506fd132a"></script><script type="text/javascript" src="/dist/js/index.js?e6219853995506fd132a"></script></body> </html>
On peut voir que les fichiers générés, en plus de conserver le contenu du modèle original, ajoutent automatiquement les fichiers CSS et JS à引入, ainsi que le favicon, et ajoutent également les valeurs hash correspondantes.
Deux questions
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
/*
extract-text-webpack-plugin插件，
Avec cela, vous pouvez extraire vos styles dans un fichier css distinct.
Maman n'a plus à s'inquiéter que les styles ne soient pas inclus dans le fichier js.
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin, un plugin essentiel pour générer des fichiers HTML dans webpack.
Pour plus d'informations, consultez ici: https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
*Extraire les modules communs, générer un chunk nommé `commons`
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
//Compression
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
//Détection du mode de développement
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry); //Répertoire du fichier
extname = path.extname(entry); //Extension du fichier
basename = path.basename(entry, extname); //Nom du fichier
pathname = path.join(dirname, basename);
pathname = pathDir + '';63; pathname.replace(new RegExp('^', '')); + pathDir, '') : pathname;
entries[pathname] = ['./' + entry]; //c'est ainsi qu'on écrit sous macOS, win7 entries[basename]
}
console.log(entries);
return entries;
}
//entrée (obtenues par la méthode getEntry pour toutes les pages d'entrée)
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
//extraire les parties communes des modules à partir de entries pour obtenir les noms de fichiers
var chunks = Object.keys(entries);
//pages de modèle (obtenues par la méthode getEntry)
var pages = Object.keys(getEntry('src/template/**/*.html', 'src/template/'));
console.log(pages)
var config = {
entry: entries,
output: {
path: path.join(__dirname, './public/dist/'),//configuration du répertoire de sortie, le chemin des ressources telles que les modèles, les styles, les scripts et les images est par rapport à celui-ci
publicPath: '/dist/', //chemin du serveur pour les ressources telles que les modèles, les styles, les scripts et les images
filename: 'js/[name].js', //configuration générée pour le JavaScript principal de chaque page
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //configuration générée par chunk
},
module: {
loaders: [ //chargeur
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
test: /.less$/,
loader: ExtractTextPlugin.extract('css!less')
test: /.html$/,
loader: "html?-minimiser" //éviter la compression html,https://github.com/webpack/html-loader/issues/50
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
]),
},
plugins: [
new webpack.ProvidePlugin({ //Charger jq
$: 'jquery'
}),
new CommonsChunkPlugin({
name: 'commons', // Extraire les modules communs, générer un chunk nommé `commons`
chunks: chunks,
minChunks: chunks.length // Extraire tous les modules dépendants des entrées
}),
new ExtractTextPlugin('css/[name].css'), //Utiliser le tag link pour charger le css et configurer le chemin, par rapport à publickPath configuré dans output
debug ? function() {} : new UglifyJsPlugin({ //Compresser le code
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //mot-clé à exclure
}),
]),
};
pages.forEach(function(pathname) {
var conf = {
filename: '../../views/' + pathname + '.html', //chemin d'-stockage de l'HTML généré, par rapport à path
template: 'src/template/' + pathname + '.html', //chemin du template HTML
inject: false, //emplacement d'insertion du js, true/'head'/'body'/false
/*
* Pour ce qui est de la compression, il a appelé html-minify, cela peut entraîner de nombreux problèmes de vérification de syntaxe HTML lors de la compression.
* Si vous utilisez des expressions {{...}} sur les attributs des balises HTML, donc dans de nombreux cas, il n'est pas nécessaire de configurer l'option de compression ici.
* De plus, UglifyJsPlugin compressera également l'HTML lors de la compression du code.
* Pour éviter la compression HTML, il faut configurer html-Configurer 'html?-minimize' dans loaders/html-Configuration du loader.
*/
// minify: { //Compresser le fichier HTML
// removeComments: true, //Supprimer les commentaires HTML
// collapseWhitespace: false //Supprimer les espaces blancs et les retours à la ligne
// }
};
if (pathname in config.entry) {
favicon: '.',/src/favicon.ico', //Le chemin du favicon, intégré par webpack, peut également générer une valeur de hash
conf.inject = 'body';
conf.chunks = ['commons', pathname];
conf.hash = true;
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
Le code suivant est similaire à celui du dessus, la différence fondamentale est que tous les fichiers pertinents sont placés dans un objet par une méthode, ce qui complète l'effet d'auto-introduction !
Les configurations ci-dessus sont pour le système mac osx, win7Les chemins peuvent être différents
glob : La différence ici est que :
Mais nécessite finalement
entries:
{
index: ['./src/template/index.js'],
page1: ['./src/template/page1.js']
}
pages:
['index', 'page1']
Doit être modifié en fonction de la configuration de l'ordinateur personnel
C'est tout pour cet article, j'espère que cela aidera à votre apprentissage et que vous soutiendrez davantage le tutoriel de cri.
Déclaration : le contenu de cet article est来源于网络，propre à ses auteurs, le contenu est自发贡献并由互联网用户自行上传，ce site ne détient pas les droits de propriété, n'a pas été édité par l'homme, et n'assume pas la responsabilité des responsabilités juridiques associées. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un email à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un email pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)