Webpack - 如何做簡單的css縮小和拼接

Webpack功能強大，當然，但對於初學者來說它很混亂和複雜（就像我一樣）。最近它們並沒有幫助他們遷移到2.2，所以我看到的很多文檔是針對增加了這個難度的舊版本。Webpack - 如何做簡單的css縮小和拼接

所有我想做的事情是這樣的：

我有一個app.css和main.css的，我要來縮小和捆綁成一個（比如app.min.css），並複製到我的輸出目錄 - 最簡單的方法是什麼？

我手動將其鏈接到我的html文件中，所以我不需要webpack爲我寫任何URL。我可能會在模塊化方面做更多花哨的事情，但現在我想讓我的基本設置正常運行。我確實有我的webpack.config.js運行在我的入口index.js文件中，並且看起來都很好。

最簡單的方法是什麼？我錯過了什麼？我迷失在這個裝載器和那個裝載器（css-loader，raw-loader，style-loader ...）以及那些神祕而且需要時間去弄清楚的錯誤。我很驚訝於如此強大你想象有更簡單的方法可以做到這樣的基本的東西的工具...

感謝您的幫助

來源

2017-01-29 Gerry

這其實是很簡單的，並解釋它的the docs do a good job 。

首先，您需要確保配置了一個css加載器，以便Webpack知道如何處理css文件。然後通過使用ExtractTextPlugin，您基本上將您指定的內容捆綁到單獨的文件中。

入口塊可以帶多個文件，所以你可以像這樣修改它。或者您可以在index.js的頂部輸入/輸入它們。

entry: { 
    bundle: "./index.js", 
    main: "./main.css", 
    app: "./app.css" 
}

來源

2017-01-29 23:35:37 cgatian

謝謝你的回答。我決定不再去追求webpack了。對於我需要完成的工作而言，太多的麻煩 - 一個不是太大而且文件數量巨大的應用程序。 Gulp正在盡我所能地減少痛苦！或者，也許我只是愚蠢:) – Gerry

@Gerry，這可能是真的。如果你不使用像Angular或React這樣的組件框架，那麼你可能是對的。就個人而言，如果這是一個需要維護一年以上的項目，並且會拉入更多的庫，那麼我認爲使用Webpack是一件不容易的事情。我已經度過了吞噬的痛苦，它滿足了它的需求，但是在你身後有一個模塊系統可以極大地幫助你。 – cgatian

一旦我的挫敗感消失了，我可能會在將來某個時候回到它:)並且文檔變得更好。 – Gerry

Webpack - 如何做簡單的css縮小和拼接

回答

相關問題