webpack--loader

標籤：建立   其他   打包   遍曆   模組   bpa   mod   檔案的   運算式   

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
執行以上命令後，會再目前的目錄產生 node_modules 目錄，它就是 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