Pratique du chargeur Webpack

Les développeurs qui sont nouveaux dans le concept de modèles front-end ont généralement utilisé la méthode de modèle de soulignement. Elle est très simple et facile à utiliser. Elle prend en charge l'affectation, le jugement conditionnel, le bouclage, etc., et peut essentiellement répondre à nos besoins.

Lorsque vous utilisez Webpack pour créer un environnement de développement, si vous souhaitez utiliser la méthode de modèle de soulignement pour afficher le modèle frontal, nous pouvons enregistrer le code du modèle indépendamment dans le fichier modèle. Comment charger le fichier modèle dans notre JavaScript pour le rendu du modèle est devenu le premier problème que nous devons résoudre.

En parlant de cela, nous devons mentionner le concept de loader (loader) dans Webpack prend en charge la conversion des fichiers de ressources d'application via le chargeur, et nos fichiers modèles en ont également besoin. chargeurs correspondants à charger afin de soutenir notre développement.

Le joystick gauche dans segmentfault a mentionné que raw-loader, html-loader, template-html-loader et ejs-loader peuvent actuellement prendre en charge le chargement de modèles. . . . . . [Reportez-vous aux modèles pour plus de listes]

Les différents chargeurs sont légèrement différents, ce qui se reflète dans les performances du code JS après le chargement. Certains renvoient des chaînes et d'autres renvoient des objets ou des méthodes JS.

Nous essayons d'utiliser raw-loader pour le gérer. L'explication officielle de raw-loader est [Charger le fichier sous forme de chaîne], donc. nous pouvons Le fichier modèle est chargé dans une chaîne, puis le trait de soulignement est utilisé pour restituer le HTML final.

Nous utilisons la configuration suivante pour créer simplement un environnement webpack.

package.json

{  "name": "tpl-webpack",  "version": "1.0.0",  "description": "",  "main": "index.js?1.1.10",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
  },  "author": "",  "license": "ISC",  "devDependencies": {"html-webpack-plugin": "^2.28.0","raw-loader": "^0.5.1","underscore": "^1.8.3","webpack": "^3.0.0"
  }
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'},
    module: {
        loaders:[
            {
               test: /\.tpl$/,
               use: 'raw-loader'}
        ]
    },
    plugins: [new HtmlWebpackPlugin()]
};

Code du modèle index.tpl

<% _.each(data, function(n){ %><p>姓名：<%= n.name %>,年龄：<%= n.age %>,性别：<%= n.sex %></p><% }); %>

index.js

 1 var _ = require('underscore'); 2  3 // 这里可以看到indexTplFile只是字符串 4 var indexTplStr = require('./index.tpl'); 
 5 // template方法将其封装成一个方法 6 var indexTpl = _.template(indexTplStr); 7   8 var data = [ 9     {10         name: 'mike',11         age: 18,12         sex: '男'13     },14     {15         name: 'nina',16         age: 20,17         sex: '女'18     },19     {20         name: 'elle',21         age: 26,22         sex: '女'23     }24 ];    
25 26 document.body.innerHTML = indexTpl({data:data});

Copier après la connexion

index.js

Après avoir exécuté npm install, exécutez webpack, ouvrez index.html, vous pouvez voir les résultats suivants.

姓名：mike,年龄：18,性别：男

姓名：nina,年龄：20,性别：女

姓名：elle,年龄：26,性别：女

Mais on peut voir que lors du processus de rendu du modèle, trois lignes de code sont exécutées. Si nous voulons générer la chaîne HTML finale avec une seule ligne de code, continuez à essayer <.>ejs-loader.

 1 var webpack = require('webpack'); 2 var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 module.exports = { 4     entry: './index.js', 5     output: { 6         filename: 'bundle.js' 7     }, 8     module: { 9         loaders:[ 
10             { 
11                 test: /\.tpl$/, 
12                 loader: 'ejs-loader?variable=data'13             },14         ]15     }, 
16     plugins: [ 
17         new HtmlWebpackPlugin(),18         // 提供全局变量_19         new webpack.ProvidePlugin({20             _: "underscore"21         })22     ]23 };

var indexTpl = require('./index.tpl');
document.body.innerHTML = indexTpl(data);

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!