1. 什麼是 loader
官方的解釋是這樣的：
loader 用於對模組的原始碼進行轉換。loader 可以使你在 import 或"載入"模組時預處理檔案。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將檔案從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯影象轉換為 data URL。loader 甚至允許你直接在 JavaScript 模組中 import CSS檔案！
可能會一臉懵懂吧。
說白了，就是 loader 類似於 task，能夠處理檔案，比如把 Scss 轉成 CSS，TypeScript 轉成 JavaScript 等。
再不明白的話，還是用例項來說明吧。（其實它的概念並不重要，你會用就行）
2. 用 css-loader 和 style-loader 處理 CSS
現在我們來演示一下如何用 loader 來處理 CSS 檔案。
先準備好內容。
src/app.css
body {
background: pink;
}
複製程式碼src/app.js
import css from './app.css';
console.log("hello world");
複製程式碼如果你現在執行 npm run dev 或 webpack 命令，就會出現類似下面的提示錯誤。
意思就是說，預設情況下，webpack 處理不了 CSS 的東西。
我們來處理這個問題。
$ npm install --save-dev css-loader style-loader
複製程式碼webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})],
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
複製程式碼我們來看下效果：
dist/index.html
編譯出的內容跟之前的差不多。
我們用瀏覽器開啟 dist/index.html 檔案。
編譯出的 app.bundle.js 檔案是有包含 CSS 的內容的。
3. 用 sass-loader 把 SASS 編譯成 CSS
應該都知道 SASS 是什麼吧，不懂的話可以查一下。
說白了，就是可以用更好的語法來寫 CSS，比如用巢狀。看下面的例子應該就會理解的。
把 src/app.css 改名為 src/app.scss
src/app.scss
body {
background: pink;
p {
color: red;
}
}
複製程式碼src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
複製程式碼src/app.js
import css from './app.scss';
console.log("hello world");
複製程式碼安裝（中間可能要下載二進位制包，要耐心等待）
$ npm install sass-loader node-sass --save-dev
複製程式碼webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
})],
module: {
rules: [
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
}
};
複製程式碼效果如下：
4. 用 extract-text-webpack-plugin 把 CSS 分離成檔案
有時候我們要把 SASS 或 CSS 處理好後，放到一個 CSS 檔案中，用這個外掛就可以實現。
$ npm install --save-dev extract-text-webpack-plugin
複製程式碼webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true,
},
hash: true,
}),
new ExtractTextPlugin('style.css')
],
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']
})
}
]
}
};
複製程式碼在 dist 目錄下生成了 style.css 檔案。
dist/style.css
body {
background: pink; }
body p {
color: red; }
複製程式碼dist/index.html
先說這麼多吧。