webpackの "module.exports = 'html_template_content'"とまったく同じことをします

Question

私はwebpackを使って非常に簡単な作業をしたいと思います。

私は静的なHTMLテンプレートをいくつか持っています。

test.htmlという

<div><span>template content</span></div> 

と私がやりたいことのすべては、のような文字列を返す必要があり 例えば

require("raw!./test.html") 

とテンプレート内の文字列を返します：

"<div><span>template content</span></div>" 

を代わりに次の文字列を返します

"modules.exports = <div><span>template content</span></div>" 

raw-loaderとhtml-loaderのようないくつかのモジュールを試しました。 これらはどちらも同じように動作します。私はソースコードを見て、そのように動作するようにSUPPOSEDを見つけました。

のでまさに私はちょうど生 HTMLをしたい場合は、これを行うには期待していますか？前もって追加された "module.exports ="文字列を削除するのは悪い習慣ですか？あなたがrequire('./test.html')を書くとき、それはあなたが単にコードを実行することを意味/

私の設定

module.exports = 
{ 
    module: 
    { 
     loaders: 
      [ 
       { test: /\.html$/, loader: "raw-loader" } 
      ] 
    } 
}; 

Answer 1

私は、それは確かに、HTMLテンプレートを返す が、私たちはより良いものを見つけたまで議論するために、このソリューションを残すのeval

console.log(eval(require("raw!./test.html"))); 

を使用して汚れた回避策を見つけました。これはすでにWebPACKのコンフィグ

const test = require('./test.html') 

説明に指定されているよう

Answer 2

：バンドル 編集から：何も返さないバンドルの「modules.export =」の部分の結果を削除ローダーチェーンから返されます。結果はこのコードでmodule.exportsとしてエクスポートされます。あなたは、変数への声明を要求割り当てる必要があり、この結果を使用するには： - ないHTML、CSSない

var htmlString = require('raw!./test.html'); 
//htmlString === "<div><span>template content</span></div>" 

をWebPACKの内いずれかのローダはJSコードを返すことに注意してください。 このコードを使用すると、HTML、CSSなどを取得できます。

Answer 3

ソリューションは、任意の追加のローダーを指定せずにファイルを要求することです：あなたの現在のコードでは、あなたのファイルに二回rawローダーを適用しています。構成にローダーチェーンを指定すると、

loaders: 
    [ 
     { test: /\.html$/, loader: "raw-loader" } 
    ] 

...あなたはこの

const test = require('raw!./test.html') 

を書くとき、あなたはすでに、したがって、ローダチェーンにします（ここでは、すべてのhtmlファイル）test条件に合致するファイルを必要とするたびに、このローダーを追加する

をWebPACKのを言っています...実際にはこれと同じです

const test = require('raw!raw!./test.html')