Webpack ローダーの練習

フロントエンドテンプレートの概念を初めて使用する開発者は、通常、アンダースコアのテンプレートメソッドを使用します。これは、代入、条件判断、ループなどをサポートしており、基本的にニーズを満たすことができます。

Webpackを使用して開発環境を構築する場合、アンダースコアのテンプレートメソッドを使用してフロントエンドテンプレートをレンダリングしたい場合は、テンプレートコードをテンプレートファイルに独立して保存できます。テンプレートのレンダリングのためにテンプレート ファイルを JavaScript にロードする方法が、解決する必要がある最初の問題になります。

これについて言えば、Webpack の loader の概念について言及する必要があります。Webpack はローダーを介したアプリケーションのリソース ファイルの変換をサポートしており、テンプレート ファイルもそれらをロードするために対応するローダーを必要とします。

segmentfault の Leftstick は、現在 raw-loader、html-loader、template-html-loader、および ejs-loader がテンプレートの読み込みをサポートできると述べました。 。 。 。 。 。 [その他のリストについては、テンプレートを参照してください]

ローダーによっては若干異なり、ロード後の JS コードのパフォーマンスに反映されるものもあります。

これを処理するためにraw-loaderを使用しようとします。 raw-loaderの公式の説明は[ファイルを文字列としてロードする]であるため、テンプレートファイルを文字列にロードし、アンダースコアを使用できます。それを最終的な HTML にレンダリングします。

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

テンプレートコード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

npm install を実行した後、webpack を実行し、index.html を開くと、次の結果が表示されます。

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

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

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

しかし、テンプレートのレンダリングのプロセス中に 3 行のコードが実行されることがわかります。1 行のコードだけで最終的な HTML 文字列を生成したい場合は、引き続き 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 };

対応する tpl ファイルを必要とした後、対応する HTML テンプレートを直接レンダリングすることもでき、コードでの使用も非常に簡単になります。

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

raw-loader と ejs-loader の比較を通じて、webpack でのローダーの使用法についてある程度理解できます。つまり、ローダーは、ある種の解析メソッドを通じてさまざまな種類のファイルをコードにモジュール化します。さらに処理するためにそれを JavaScript に提供します。

以上がWebpack ローダーの練習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。