webpack將CSS作爲JS捆綁中的字符串嵌入

我一直在閱讀有關webpack的知識，最後我終於明白了webpack的基本功能。我還需要webpack的許多高級功能。所以我試圖儘可能地學習webpack的功能。webpack將CSS作爲JS捆綁中的字符串嵌入

所以，我正在閱讀另一個偉大的webpack源代碼。但是，因爲我會提供這個頁面的github維基鏈接，它說了一些我不明白的東西。

當您需要CSS（或更少等）時，webpack將CSS內聯到JS束中的一個字符串中，並且require（）會將一個標記插入到頁面中。當你需要圖像時，webpack將圖像的URL內聯到bundle中並從require（）返回。

我希望有人可以幫助我清楚的事情了這一部分。

2016-04-25 FurkanO

比方說，你有myStyle.css與內容：

.something { color: red; }

當你（在你的.js文件）做：

require('./myStyle.css');

那麼的WebPack將讀取的該樣式文件，並將其輸出您的HTML文檔中的<style>標籤，例如

<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

回答