Premiers pas avec Webpack : partie 1-tutoriel HTML-php.cn

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

Copier après la connexion

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>

Copier après la connexion

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 + '!';
};

Copier après la connexion

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'));

Copier après la connexion

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

et de voir s'il a des dépendances. Si tel est le cas, il doit les compiler ensemble et créer un fichier bundle.js que nous pouvons utiliser dans le navigateur.

Retournez au terminal et exécutez Webpack. Entrez simplement :

webpack main.js bundle.js

Copier après la connexion

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]

Copier après la connexion

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é

dans le répertoire racine de votre projet avec le contenu suivant :

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
};

Copier après la connexion

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

à chaque fois que vous modifiez un fichier ? Je ne sais pas, la génération d'aujourd'hui bla bla bla. D'accord, configurons un petit serveur de développement pour rendre les choses plus efficaces. Dans le terminal écrivez :

npm install webpack-dev-server -g

Copier après la connexion

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 :

Maintenant, non seulement nous avons un joli petit serveur Web, mais nous avons également un serveur qui peut surveiller les modifications du code. S'il constate que nous avons modifié un fichier, il exécute automatiquement les commandes webpack pour regrouper notre code et actualiser la page sans que nous ayons à faire quoi que ce soit. Le tout sans configuration.

sayHelloEssayez-le, changez le nom transmis à la fonction

, puis revenez au navigateur pour voir les modifications appliquées immédiatement. 🎜

装载机

Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。

假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：

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

Copier après la connexion

这不仅会安装加载器本身，还会安装其依赖项和 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']
                }
            }
        ],
    }
};

Copier après la connexion

这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。

按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？