Maison >interface Web >tutoriel HTML >Premiers pas avec Webpack : partie 1
Premiers pas avec Webpack : partie 1
- PHPzoriginal
- 2023-08-27 08:49:07732parcourir
Lors de la création d'un site Web de nos jours, il est assez courant de disposer d'une sorte de processus de création pour aider à effectuer les tâches de développement et à préparer les fichiers pour un environnement réel.
Vous pouvez le faire en utilisant Grunt ou Gulp, en créant une série de transformations qui vous permettent de mettre du code d'un côté et d'obtenir du CSS et du JavaScript minifiés de l'autre.
Ces outils sont très populaires et très utiles. Cependant, il existe un autre moyen : utiliser Webpack.
Qu'est-ce que Webpack ?
Webpack est ce qu'on appelle un "bundler de modules". Il prend des modules JavaScript, comprend leurs dépendances, puis les connecte entre eux de la manière la plus efficace et génère enfin un fichier JS. Rien de spécial, non ? Des choses comme RequireJS font cela depuis des années.
Eh bien, voici le problème. Avec Webpack, les modules ne se limitent plus aux fichiers JavaScript. En utilisant des Loaders, Webpack sait que les modules JavaScript peuvent nécessiter des fichiers CSS et que les fichiers CSS peuvent nécessiter des images. Les actifs de sortie contiendront uniquement ce qui est nécessaire et ne poseront pas trop de problèmes. Commençons par le configurer afin que nous puissions le voir en action.
Installation
Comme pour la plupart des outils de développement, vous devez installer Node.js avant de pouvoir continuer. En supposant que vous l'avez correctement configuré, tout ce que vous avez à faire pour installer Webpack est de taper ce qui suit dans la ligne de commande.
npm install webpack -g
Cela installera Webpack et vous permettra de l'exécuter depuis n'importe où sur votre système. Ensuite, créez un nouveau répertoire et créez-y un fichier HTML de base comme ceci :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack fun</title>
</head>
<body>
<h2></h2>
<script src="bundle.js"></script>
</body>
</html>
La partie importante ici est la référence à bundle.js , c'est ce que Webpack va faire pour nous. Notez également l'élément H2 - nous l'utiliserons plus tard.
Ensuite, créez deux fichiers dans le même répertoire que le fichier HTML. Nommez le premier main.js，您可以想象它是我们脚本的主要入口点。然后将第二个say-hello.js. Il s'agirait d'un module simple qui prend le nom d'une personne et un élément DOM et insère un message de bienvenue dans ledit élément.
// say-hello.js
module.exports = function (name, element) {
element.textContent = 'Hello ' + name + '!';
};
Nous avons maintenant un module simple que nous pouvons importer et appeler depuis main.js. C'est aussi simple que de faire ce qui suit :
var sayHello = require('./say-hello');
sayHello('Guybrush', document.querySelector('h2'));
Maintenant, si nous ouvrons le fichier HTML, alors évidemment ce message ne sera pas affiché car nous n'avons pas inclus main.js 也没有编译浏览器的依赖项。我们需要做的是让 Webpack 查看 main.js ni compilé la dépendance du navigateur. Ce que nous devons faire, c'est demander à Webpack de regarder
Retournez au terminal et exécutez Webpack. Entrez simplement :
webpack main.js bundle.js
bundle.jsLe premier fichier spécifié est le fichier d'entrée dans lequel nous voulons que Webpack commence à rechercher les dépendances. Il déterminera si les fichiers requis nécessitent d'autres fichiers et continuera à le faire jusqu'à ce que toutes les dépendances nécessaires aient été calculées. Une fois terminé, il génère les dépendances sous la forme d'un seul fichier concaténé vers . Si vous appuyez sur Entrée, vous devriez voir quelque chose comme ceci :
Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
Asset Size Chunks Chunk Names
bundle.js 1.65 kB 0 [emitted] main
[0] ./main.js 90 bytes {0} [built]
[1] ./say-hello.js 94 bytes {0} [built]
index.htmlOuvrez maintenant dans votre navigateur pour voir votre page vous disant bonjour. Configuration
webpack.config.jsSpécifier des fichiers d'entrée et de sortie à chaque fois que vous exécutez Webpack n'est pas très amusant. Heureusement, Webpack nous évite les ennuis en nous permettant d'utiliser des fichiers de configuration. Créez un fichier nommé
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
webpackMaintenant, nous pouvons obtenir le même résultat en tapant simplement . Serveur de développement
webpackQu'est-ce que c'est ? Est-ce que vous prenez même la peine de taper
npm install webpack-dev-server -g
webpack-dev-serverEnsuite, exécutez la commande . Cela démarrera un simple serveur Web en cours d'exécution, en utilisant le répertoire actuel comme emplacement pour servir les fichiers. Ouvrez une nouvelle fenêtre de navigateur et visitez http://localhost:8080/webpack-dev-server/. Si tout se passe bien, vous verrez quelque chose comme ceci : 
sayHelloEssayez-le, changez le nom transmis à la fonction
装载机
Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。
假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：
npm install babel-loader babel-core babel-preset-es2015 --save-dev
这不仅会安装加载器本身，还会安装其依赖项和 ES2015 预设，因为 Babel 需要知道它正在转换的 JavaScript 类型。
现在加载器已安装，我们只需要告诉 Babel 使用它即可。更新 webpack.config.js 使其看起来像这样：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
};
这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。
按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？
const sayHello = require('./say-hello')
保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望您不会看到任何变化。查看 bundle.js 并查看是否可以找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，您将不会在任何地方看到它——只是普通的旧 JavaScript。
进入第 2 部分
在本教程的第 2 部分中，我们将介绍如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的网站做好部署准备。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!