整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
sass文件后綴名有兩種：
1、后綴名為sass，不適用用大括號和分號；
2、后綴名為scss，這種文件跟css文件使用類似，使用大括號和分號；
（建議使用后綴名為scss的文件，以避免sass后綴名的嚴格格式要求報錯。）sass注釋方式有兩種：
1、標準的css注釋/**/；
2、//雙斜杠形式的單行注釋（不會被轉譯）；準的css注釋
雙斜桿單行注釋
@import導入
sass導入（@import）規則和css有所不同，編譯時會將@import的scss文件給整合生成一個css文件。
但是如果你在scss文件中@import一個css文件如"reset.css"，效果跟css文件@import一樣，
會以@import的形式存在。
所有的sass導入文件都可以忽略后綴名.scss。
一般來說基礎的文件命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import "mixin"。被導入sass文件a.scss：
需要導入樣式的sass文件b.scss
轉譯出來的b.css樣式：
b.scss編譯后，reset.css文件繼續保持import的方式，a.scss文件被整合進來。
載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/
今天繼續我們的Webpack 4入門教程。在介紹了Webpack的基本概念之后，是時候更深入一點了。這次我們會涉及Webpack中非常強大的一個東西:loader。首先，我們會學習如何使用那些可用的loader。它將包括如何處理css、scss、圖片以及對老版本的JavaScript語言的轉換。讓我們開始吧！
Webpack 4 入門教程繼續 - 什么是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 這個屬性是一個數組，指明你的各個loader。它會作用于匹配到 test 屬性所指定規則的每一個文件。這個規則，實際上，是一個正則表達式。
use
屬性 use 指明需要對匹配的文件應用那個loader。
串聯多個loader
有了上面的代碼，你就能夠在你的JavaScript代碼中導入css文件了。（例如，使用之前我們提到的ES6模塊）
但這還不能讓css真正生效。我們需要一種方法讓瀏覽器能夠使用這些css。這種情況下，style-loader就派上用場了。
npm install style-loader
但那就意味著要對css文件使用兩個loader。你可以通過串聯多個loader(chaining loaders)來使它們都生效。
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
}
你可以看到，我們給了 use 屬性一個數組。一個非常重要的注意點是，串聯執行的順序是反向的（譯者注：也就是從右往左）。
/* style.css */
body {
background-color:black;
}
// index.js
import './style.css'
使用上面的配置，打包的工作方式大概是:
默認情況下，打包后的輸出是./dist/bundle.js?，F在，這個文件包含的代碼會把所有的樣式插入到<style>標簽里面。如果你在HTML中引入了bundle.js的連接，在執行完腳本后，HTML會看起來像這樣:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<style type="text/css">body {
background-color:black;
}</style></head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
sass-loader
有了這些知識，你可以輕松地給你的工程添加sass/scss支持了。你可以在這里使用 sass-loader。
npm install sass-loader
只需要在你的loader鏈里插入它:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
}
就是這樣，現在你可以引入scss文件了！文件在被 css-loader 解析之前，會從scss轉譯成純css。
（譯者注: 如果安裝完sass-loader后，本地運行Webpack出現了和node-sass相關的錯誤，可嘗試再安裝一個node-sass的包解決這個問題，即npm install node-sass）
給loader傳入選擇項
實際上，loader可以接受一些選擇項。讓我們用 url-loader 為例來說明。
npm install url-loader file-loader
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader','sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5000
}
}
]
}
]
}
};
注意，如果你想要給loader傳入配置項，你不再是把loader以字符串形式給 use 屬性?，F在它是一個對象，包含兩個屬性: loader（即loader的名字），和 options。
url-loader會把你的圖片轉換為base64格式的URI。如果你的圖片文件很小，那么把它們直接引入到代碼中會有更好的性能。這可以減少瀏覽器所發的請求數。但是，如果你的圖片文件很大，那么把它們作為單獨的文件引入可能會更好，因為瀏覽器可以并行加載它們。
這就是為什么 url-loader 有一個 limit 屬性。它指明了一個文件大?。ㄒ詁yte為單位），當超過這個大小時，文件將不會被轉為base64的URI。相比較而言，file-loader 僅僅是被用來拷貝你的文件。
body {
background-image: url('./big-background.png');
}
.icon {
background-image: url('./icon.png');
}
上面的配置會得到下面的結果：
<style type="text/css">body {
background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>
因為big-background.png比限制的大小更大，它被拷貝至dist文件夾，并被起了一個隨機的名字。而相反，icon.png文件被轉換為了base64 URI。
使用babel轉譯JavaScript
另一個流行的loader是 babel-loader。它允許你使用Babel轉譯JavaScript文件。它解決了如何使用最新版本的JavaScript來編寫代碼的問題。如果你想支持老版本的瀏覽器，或者想使用現代瀏覽器還沒有實現的功能，Babel都能夠幫到你。
npm install babel-loader @babel/core @babel/preset-env
（譯者注：原文的babel-core和babel-preset-env依賴被替換為@babel/core和@babel/preset-enve，因為新版本的Babel7中對官方提供的依賴使用了命名空間@babel）
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
注意到，我們這里使用了 exclude 屬性，它也是一個正則表達式。如果任何文件與這個表達式相匹配，它將不會被轉譯。
這里有很多預置項可以滿足你的需求。查閱Babel的官方文檔，你可以在那里找到它們的列表。
總結
這一次我們學習了Webpack很有用的一個功能：loader。我們介紹了一些可用的loader。利用它們，我們在項目中添加上了對scss的支持。此外，我們還學習如何使用 url-loader 處理圖片。另外一個loader的常用之處是我們討論的利用Babel轉譯JavaScript。在教程未來的部分，我們會深入到loader中，包括寫一個我們自己的loader。
關于葡萄城：
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
