웹팩 로더 연습

프런트 엔드 템플릿 개념을 처음 접하는 개발자는 일반적으로 밑줄의 템플릿 방법을 사용합니다. 이는 매우 간단하고 사용하기 쉽고 기본적으로 우리의 요구를 충족할 수 있습니다.

Webpack을 사용하여 개발 환경을 구축할 때 밑줄의 템플릿 방식을 사용하여 프런트엔드 템플릿을 렌더링하려는 경우 템플릿 파일에 독립적으로 템플릿 코드를 저장할 수 있습니다. 템플릿 렌더링을 위해 템플릿 파일을 JavaScript에 로드하는 방법이 우리가 해결해야 할 첫 번째 문제가 되었습니다.

말하자면 Webpack의 loader 개념을 언급해야 합니다. Webpack은 로더를 통해 애플리케이션의 리소스 파일 변환을 지원하며 템플릿 파일도 이를 로드하기 위해 해당 로더가 필요하며 개발을 지원할 수 있습니다.

segmentfault의 Leftstick에서는 raw-loader, html-loader, template-html-loader 및 ejs-loader가 현재 템플릿 로딩을 지원할 수 있다고 언급했습니다. . . . . . [더 많은 목록은 템플릿 참조]

로더에 따라 약간씩 다르며 이는 로드 후 JS 코드의 성능에 반영되며 일부는 JS 개체 또는 메서드를 반환합니다.

이를 처리하기 위해 raw-loader를 사용하려고 합니다. raw-loader에 대한 공식적인 설명은 [파일을 문자열로 로드]이므로 템플릿 파일을 문자열로 로드한 다음 밑줄을 사용할 수 있습니다. 최종 HTML로 렌더링합니다.

간편하게 웹팩 환경을 구축하기 위해 다음과 같은 구성을 사용합니다.

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,性别：女

하지만 템플릿을 렌더링하는 과정에서 세 줄의 코드가 실행되는 것을 볼 수 있습니다. 단 한 줄의 코드로 최종 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에 제공하십시오.

위 내용은 웹팩 로더 연습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!