樣式處理
瞭解 loader
❝在解析打包樣式之前，先要了解 webpack 中的 loader
❞
loader 對於模組程式碼的轉換，可以預處理檔案 loader 有兩個屬性 test：匹配出檔案，是一個正規表示式 use：使用哪種 loader 進行解析
安裝 css-loader
yarn add css-loader -D
解析 @import和require語法，可以把 css 當做一個模組繼續對 webpack.config.js進行改造，增加「module」欄位「module」欄位下有一個「rules」陣列
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
open: true,
progress: true
},
entry: './src/index.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: '測試',
minify: false,
template: path.resolve(__dirname, 'src/index.html'),
filename: 'test.html'
})
]
}
複製程式碼在src目錄下新建一個css資料夾，並在css資料夾內新建「index.css」和「a.css」 然後再src下「index.js」檔案裡引入這個「index.css」 在「index.css」裡面引入「a.css」
現在可以把「a.css」和「index.css」打包在一起了，但是並不能插入到頁面裡面，所以還需要安裝一個 style-loader
安裝 style-loader
yarn add css-loader -D
把 css 插入到 <head></head>中loader 如果只有一個的話可以是一個字串，如果是多個需要一個陣列 loader 還可以是一個物件方式，options 可以傳入 loader 的一些配置
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
}
}
]
複製程式碼loader 的順序，從右向左執行，從下向上執行
現在改一下「webpack.config.js」
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
複製程式碼❝現在打包後執行「dist」目錄下的「test.html」發現「body」背景是紅色的，字型是白色
❞
歡迎關注公眾號
