Webpack-Loader-Praxis

Entwickler, die mit dem Konzept der Front-End-Vorlagen noch nicht vertraut sind, haben normalerweise die Vorlagenmethode von Underscore verwendet. Sie ist sehr einfach und benutzerfreundlich. Sie unterstützt Zuweisung, bedingte Beurteilung, Schleife usw. und kann grundsätzlich unsere Anforderungen erfüllen.

Wenn Sie Webpack zum Erstellen einer Entwicklungsumgebung verwenden und die Vorlagenmethode von Underscore zum Rendern der Front-End-Vorlage verwenden möchten, können wir den Vorlagencode unabhängig in der Vorlagendatei speichern. Das erste Problem, das wir lösen müssen, ist das Laden der Vorlagendatei in unser JavaScript zum Rendern von Vorlagen.

Apropos: Wir müssen das Konzept des Loaders (Loader) in Webpack erwähnen, der die Konvertierung von Anwendungsressourcendateien über den Loader unterstützt, und unsere Vorlagendateien benötigen auch entsprechende Lader zum Laden, um unsere Entwicklung zu unterstützen.

Leftstick erwähnte in segmentfault, dass Raw-Loader, HTML-Loader, Template-HTML-Loader und EJS-Loader derzeit das Laden von Vorlagen unterstützen können. . . . . . [Weitere Listen finden Sie unter Vorlagen]

Verschiedene Lader unterscheiden sich geringfügig, was sich in der Leistung im JS-Code nach dem Laden widerspiegelt. Einige geben Zeichenfolgen zurück, andere geben JS-Objekte oder -Methoden zurück.

Wir versuchen, Raw-Loader zu verwenden, um damit umzugehen. Die offizielle Erklärung von Raw-Loader lautet [Datei als String laden]. Wir können die Vorlagendatei in eine Zeichenfolge laden und dann den Unterstrich verwenden, um den endgültigen HTML-Code zu rendern.

Wir verwenden die folgende Konfiguration, um einfach eine Webpack-Umgebung aufzubauen.

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()]
};

Vorlagencode 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});

index.js

Nachdem Sie npm install ausgeführt, Webpack ausgeführt und index.html geöffnet haben, können Sie die folgenden Ergebnisse sehen.

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

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

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

Aber es ist ersichtlich, dass beim Rendern der Vorlage drei Codezeilen ausgeführt werden. Wenn wir die endgültige HTML-Zeichenfolge mit nur einer Codezeile generieren möchten, versuchen Sie es weiter ejs-loader.

webpack.config.js

 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 };

ist auch sehr einfach im Code zu verwenden. Nachdem Sie die entsprechende TPL-Datei angefordert haben, können Sie die entsprechende HTML-Vorlage direkt rendern .

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

Durch den Vergleich zwischen Raw-Loader und EJS-Loader können wir ein gewisses Verständnis für die Verwendung des Loaders im Webpack erlangen, das heißt, der Loader dient dazu, verschiedene Arten von zu übergeben Dateien durch eine Art Parsing-Methode werden in unseren Code modularisiert und dann zur weiteren Verarbeitung an Javascript übergeben.

Das obige ist der detaillierte Inhalt vonWebpack-Loader-Praxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!