Approfondir votre compréhension de Webpack : partie 2

Dans le tutoriel précédent, nous avons appris comment mettre en place un projet Webpack et comment utiliser un chargeur pour gérer JavaScript. Cependant, là où Webpack brille vraiment, c'est sa capacité à regrouper d'autres types de ressources statiques (telles que CSS et images) et à les inclure dans nos projets uniquement en cas de besoin. Commençons par ajouter du style à la page.

Chargeur de styles

Tout d’abord, créez un fichier CSS normal dans le répertoire styles. Appelez main.css et ajoutez une règle de style pour l'élément de titre.

h2 {
    background: blue;
    color: yellow;
}

Alors, comment mettre cette feuille de style dans notre page ? Eh bien, comme la plupart des choses avec Webpack, nous avons besoin d'un autre chargeur. Il y en a en fait deux : css-loader et style-loader. Le premier lit tous les styles de notre fichier CSS, tandis que l'autre injecte lesdits styles dans notre page HTML. Installez-les comme ceci :

npm install style-loader css-loader

Ensuite, nous expliquons à Webpack comment les utiliser. Dans webpack.config.js, nous devons ajouter un autre objet au tableau des chargeurs. Dans celui-ci, nous allons ajouter un test pour faire correspondre uniquement les fichiers CSS et spécifier le chargeur à utiliser.

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style!css'
}

La partie intéressante de cet extrait de code réside dans les styles 'style!css' 行。加载器是从右向左读取的，因此这告诉 Webpack 首先读取以 .css à la fin de n'importe quel fichier, puis dans l'injection de ces styles dans notre page.

Étant donné que nous avons mis à jour les fichiers de configuration, nous devons redémarrer le serveur de développement pour que les modifications prennent effet. Utilisez ctrl+c 停止服务器并使用 webpack-dev-server pour redémarrer le serveur.

Tout ce que nous devons faire maintenant est d'obtenir la feuille de style du fichier main.js. Nous procédons de la même manière que n'importe quel autre module JavaScript :

const sayHello = require('./say-hello');

require('./styles/main.css');

sayHello('Guybrush', document.querySelector('h2'));

Notez que nous n’avons même pas touché index.html。打开浏览器即可看到样式为 h2 la page. La modification de la couleur de l'en-tête dans la feuille de style est mise à jour immédiatement sans actualisation. mignon.

Il faut crier dessus

« Mais personne n’utilise CSS de nos jours, grand-père ! Tout tourne autour de Sass ». Bien sûr. Heureusement, Webpack dispose d'un chargeur qui fait exactement cela. Installez-le avec la version nœud de Sass à l'aide de la commande suivante :

npm install sass-loader node-sass

Puis mettez à jour webpack.config.js :

{
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: 'style!css!sass'
}

Ce que cela signifie maintenant, c'est que pour tout fichier se terminant par .scss, convertissez Sass en CSS pur, lisez les styles du CSS, puis insérez les styles dans la page. N'oubliez pas de renommer .scss 结尾的文件，将 Sass 转换为纯 CSS，从 CSS 中读取样式，然后将样式插入到页面中。请记住将 main.css 重命名为 main.scss en main.scss et d'exiger le fichier nouvellement nommé. D'abord un peu de Sass :

$background: blue;

h2 {
    background: $background;
    color: yellow;
}

Puis main.js :

require('./styles/main.scss');

Super. C'est aussi simple que cela. Pas besoin de convertir et d'enregistrer des fichiers ni même de consulter des dossiers. Il suffit de saisir directement le style Sass.

Photos

"Alors je parie qu'il en va de même pour les images, les chargeurs, bien sûr ?" Pour les images, nous allons utiliser url-loader. Ce chargeur récupère l'URL relative de l'image et met à jour le chemin afin qu'il soit correctement inclus dans votre package. Comme d'habitude :

npm install url-loader

Maintenant, essayons quelque chose de différent en webpack.config.js. Ajoutez une autre entrée au tableau loaders de la manière habituelle, mais cette fois, nous voulons que l'expression régulière fasse correspondre les images avec différentes extensions de fichier :

{
    test: /\.(jpg|png|gif)$/,
    include: /images/,
    loader: 'url'
}

Notez une autre différence ici. Nous n'utilisons pas exclude 键。相反，我们使用 include. Ceci est plus efficace car cela indique à Webpack d'ignorer tout ce qui ne correspond pas à un dossier nommé "images".

Normalement, vous utiliseriez une sorte de système de modèles pour créer des vues HTML, mais nous allons le garder basique et créer le balisage d'image en JavaScript à l'ancienne. Créez d'abord un élément d'image, définissez l'image requise sur l'attribut src, puis ajoutez l'élément à la page.

var imgElement = document.createElement('img');

imgElement.src = require('./images/my-image.jpg');

document.body.appendChild(imgElement);

Retournez au navigateur et votre image apparaîtra devant vous !

Préchargement

Une autre tâche souvent effectuée pendant le développement est le peluchage. Le linting est une méthode permettant de rechercher des erreurs potentielles dans votre code et de vérifier que vous respectez certaines conventions de codage. Ce que vous voudrez peut-être rechercher, c'est « Ai-je utilisé une variable sans la déclarer au préalable ? » ou « Ai-je oublié le point-virgule à la fin de la ligne ? » En appliquant ces règles, nous pouvons éliminer les erreurs stupides dès le début.

JSHint 是一种流行的 linting 工具。这会检查我们的代码并突出显示我们所犯的潜在错误。 JSHint 可以在命令行手动运行，但这很快就会成为开发过程中的一件苦差事。理想情况下，我们希望它在每次保存文件时自动运行。我们的 Webpack 服务器已经在留意变化，所以是的，你猜对了——另一个加载器。

按照通常的方式安装jshint-loader：

 npm install jshint-loader

我们必须再次将其添加到我们的 webpack.config.js 中来告诉 Webpack 使用它。然而，这个加载器略有不同。它实际上并没有转换任何代码——只是看看。我们也不希望所有较重的代码修改加载器仅仅因为忘记了分号而运行并失败。这就是预加载器的用武之地。预加载器是我们指定在主要任务之前运行的任何加载器。它们以与加载器类似的方式添加到我们的 webpack.conf.js 中。

module: {
    preLoaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint'
        }
    ],
    loaders: [
       ...    
    ]
}

现在，如果检测到问题，我们的 linting 过程会立即运行并失败。在重新启动 Web 服务器之前，我们需要告诉 JSHint 我们正在使用 ES6，否则当它看到我们正在使用的 const 关键字时将会失败。

在配置中的模块键之后，添加另一个名为“jshint”的条目和一行来指定 JavaScript 的版本。

module: {
    preLoaders: [
        ...
    ],
    loaders: [
        ...    
    ]
},
jshint: {
    esversion: 6
}

保存文件并重新启动webpack-dev-server。运行还好吗？伟大的。这意味着您的代码不包含错误。让我们通过删除这一行中的分号来介绍一个：

var imgElement = document.createElement('img')

再次保存文件并查看终端。现在我们得到了这个：

WARNING in ./main.js
jshint results in errors
  Missing semicolon. @ line 7 char 47

谢谢，JSHint！

准备生产

现在我们很高兴我们的代码已经成型并且它完成了我们想要的一切，我们需要为现实世界做好准备。上线代码时最常见的事情之一就是缩小代码，将所有文件连接成一个，然后将其压缩到尽可能小的文件中。在继续之前，请查看您当前的 bundle.js。它可读，有大量空白，大小为 32kb。

“等等！别告诉我。另一个装载机，对吧？”没有！在这种罕见的情况下，我们不需要装载机。 Webpack 内置了缩小功能。一旦您对代码感到满意，只需运行以下命令：

webpack -p

-p 标志告诉 Webpack 让我们的代码为生产做好准备。当它生成捆绑包时，它会尽可能地进行优化。运行此命令后，打开 bundle.js，您会看到它全部被压缩在一起，即使使用如此少量的代码，我们也节省了 10kb。

摘要

我希望这个由两部分组成的教程能让您有足够的信心在自己的项目中使用 Webpack。请记住，如果您想在构建过程中执行某些操作，那么 Webpack 很可能有一个加载器。所有加载器都是通过 npm 安装的，因此请查看那里是否有人已经制作了您需要的内容。

玩得开心！

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!