Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。

所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然後找到 url() 表達式然後處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。

接下來我們使用以下命令來安裝 css-loader 和 style-loader(好像這兩個命令只支持局部安裝)。

cnpm install css-loader style-loader

接下來創建一個 style.css 文件，代碼如下：

app/style.css 文件
body {
background: yellow;
}
修改 runoob1.js 文件，代碼如下：

app/runoob1.js 文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
接下來我們使用 webpack 命令來打包：

webpack runoob1.js bundle.js

require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!，當然我們可以根據模塊類型（擴展名）來自動綁定需要的 loader。 將 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：

app/runoob1.js 文件
require("./style.css");
document.write(require("./runoob2.js"));
然後執行：

webpack runoob1.js bundle.js --module-bind ‘css=style-loader!css-loader‘

效果是一樣的

webpack--loader