資訊專欄INFORMATION COLUMN
摘要：它將包括如何處理圖片以及對老版本的語言的轉(zhuǎn)換。添加使用最好的方式是在文件中指定它們。而相反，文件被轉(zhuǎn)換為了。它允許你使用轉(zhuǎn)譯文件。此外，我們還學習如何使用處理圖片。在教程未來的部分，我們會深入到中，包括寫一個我們自己的。
轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
今天繼續(xù)我們的Webpack 4入門教程。在介紹了Webpack的基本概念之后，是時候更深入一點了。這次我們會涉及Webpack中非常強大的一個東西:loader。首先，我們會學習如何使用那些可用的loader。它將包括如何處理css、scss、圖片以及對老版本的JavaScript語言的轉(zhuǎn)換。讓我們開始吧！
Webpack 4 入門教程繼續(xù) - 什么是loaders？在之前的教程，我說Webpack是一個打包器。但這不是它僅有的目的。雖然Webpack天生只能理解JavaScript文件，但可以利用loader來改變這一點。除了能夠處理多種類型的文件，Webpack還能修改它們。
添加loader使用loader最好的方式是在webpack.config.js文件中指定它們。要這么做，你需要添加module.rules屬性。
css-loader
css-loader能夠翻譯引入的css文件。
npm install css-loader
考慮如下的配置
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: "css-loader"
}
]
}
};
rules
rules 這個屬性是一個數(shù)組，指明你的各個loader。它會作用于匹配到 test 屬性所指定規(guī)則的每一個文件。這個規(guī)則，實際上，是一個正則表達式。
use
屬性 use 指明需要對匹配的文件應(yīng)用那個loader。
串聯(lián)多個loader
有了上面的代碼，你就能夠在你的JavaScript代碼中導入css文件了。（例如，使用文章上面我們提到的ES6模塊）
但這還不能讓css真正生效。我們需要一種方法讓瀏覽器能夠使用這些css。這種情況下，style-loader就派上用場了。
npm install style-loader
但那就意味著要對css文件使用兩個loader。你可以通過串聯(lián)多個loader(chaining loaders)來使它們都生效。
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader"]
}
]
},
}
你可以看到，我們給了 use 屬性一個數(shù)組。一個非常重要的注意點是，串聯(lián)執(zhí)行的順序是反向的（譯者注：也就是從右往左）。
/* style.css */
body {
background-color:black;
}
// index.js
import "./style.css"
使用上面的配置，打包的工作方式大概是:
Webpack嘗試解析 style.css 文件
文件名與正則表達式/.css$/匹配
文件被 css-loader 編譯
css-loader 處理后的結(jié)果會被傳到 style-loader
最后，style-loader 返回一串JavaScript代碼
默認情況下，打包后的輸出是./dist/bundle.js。現(xiàn)在，這個文件包含的代碼會把所有的樣式插入到