1. 什么是 loader
官方的解釋是這樣的：
loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！
webpack常用的loader，可能會一臉懵懂吧。
說白了，就是?loader?類似于 task，能夠處理文件，比如把 Scss 轉成 CSS，TypeScript 轉成 JavaScript 等。
再不明白的話，還是用實例來說明吧。（其實它的概念并不重要，你會用就行）
2. 用?css-loader?和?style-loader?處理 CSS
0基礎web前端好學嗎，現在我們來演示一下如何用?loader?來處理 CSS 文件。
先準備好內容。
src/app.css
body {background: pink; } webpack理解。src/app.js
import css from './app.css'; console.log("hello world"); 如果你現在運行?npm run dev?或?webpack?命令，就會出現類似下面的提示錯誤。
?
webpack4，?
意思就是說，默認情況下，webpack?處理不了 CSS 的東西。
我們來處理這個問題。
$ npm install --save-dev css-loader style-loader
webpack5，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
?
?
先說這么多吧。
