webpackはCSSをJSバンドル内の文字列としてインライン化します

私はwebpackについて読んでいます。私もwebpackの多くの高度な機能が必要です。だから私は可能な限りウェブパックの機能を学びたいと思っています。webpackはCSSをJSバンドル内の文字列としてインライン化します

私はwebpackのもう一つの素晴らしいソースを読んでいました。しかし、私はこのページのgithub wikiリンクを提供するので、私は何も言いません。

CSSが必要な場合、webpackはJSバンドル内の文字列としてCSSをインライン化し、require（）はページにタグを挿入します。イメージが必要な場合、webpackはイメージへのURLをバンドルにインライン化し、require（）から返します。ソースの

が、私は誰かがこの部分で私は明らか物事を役に立てば幸いです。

2016-04-25 FurkanO

のは、あなたがコンテンツとmyStyle.cssを持っているとしましょう：

.something { color: red; }

（あなた.jsファイルに）あなたが行うと：

require('./myStyle.css');

が、その後のWebPACKがでそのスタイルの文書および出力にそれを読み込みます<style>タグをHTMLドキュメントに挿入します。

<html> 
<body> 
    <style> 
     .something { color: red; } 
    </style> 
</body> 
</html>

画像と同じものです。あなたのjsの中にあなたが行う場合は、次の

const imageUrl = require('/path/to/your/image');

は、その後のWebPACKは、そのイメージをビルド/ distのフォルダにコピーされていることを確認しますと、それはユニークな名前を与えられたということ（例えば15be437 ...）。 imageUrl変数は、その一意の名前に設定されます。

これはすべて設定可能です。それをインライン展開する代わりにmake Webpack output a regular .css fileにすることができます。 Base64イメージなどにイメージを作ることができます。

2016-04-25 14:35:58

答えて