在 webpack 中，所有類型的文件都是模塊，比如 js、css、圖片、字體、json(可以說是萬物皆模塊)。

但是，在普通的 js 代碼中，我們直接 import (或require) 一張圖片或css是會報錯的。

但在 webpack 構建的項目中，歸功于 loader(加載器)，webpack 能夠把 js 的模塊化推廣至其他類型文件，比如：

import('xxx.css'); // 通過css-loader處理

復制代碼

2.處理 css 為什么要通過 webpack

傳統引用 css 代碼的方式是在 html 通過

或

標簽來引入樣式。

但是這樣不是很方便，借助 webpack 的 style-loader

和 css-loader

等 loader (或plugin)，我們可以實現在 .js 或者 .ts 中引用 css 文件，并讓樣式以

或者

的方式自動添加到 html 文件中。

3.相關 loader 或 plugin

css-loader: 實現在 js 代碼中加載 css 文件,并把 css 代碼轉化為 js 的一個 module ,比如 import('./xxx.css')

style-loader: 實現把加載的 css 代碼作為 style

標簽內容插入到 html 中

style-loader/url: 實現把加載的 css 代碼以 link

內容插入到 html 中

file-loader: 實現對文件進行處理，比如修改文件名，并且輸出到指定的路徑，

file-loader 可以單獨使用，也可以和 url-loader 一起使用

4.分別實現以

和

的方式引用 css

4.1 以

方式引用 css 需要的 loader 為: css-loader

+ style-loader

webpack.config.js 關鍵配置如下：

rules: [

{

test: /\.css$/,

// 以

use: [

{

loader: "style-loader",

options: {

singleton: true // 處理為單個style標簽,注釋掉試試看?

}

},

"css-loader"

]

}

],

復制代碼

4.2 以

方式引用 css 需要的 loader 為: file-loader

+ style-loader/url

(與 style-loader 是同一個包)

webpack.config.js 關鍵配置如下：

rules: [

{

test: /\.css$/,

// 以標簽形式引用css

use: [

"style-loader/url",

"file-loader"

]

}

]

復制代碼

5.安裝相關依賴

npm install -D css-loader

npm install -D style-loader

npm install -D file-loader

復制代碼

6.目錄結構

// `--` 代表目錄， `-` 代表文件

--demo11

--src

-app.js

-style1.css

-style2.css

-index.html

-webpack.config.js

復制代碼

src/app.js

// 同步加載

const style1 = import("./style1.css");

const style2 = import("./style2.css");

// window.addEventListener("click", function () {

// // 試試異步加載? 查看控制臺試試

// const style1 = import("./style1.css");

// const style2 = import("./style2.css");

// });

復制代碼

src/style1.css

body {

background-color: red;

}

/* console.log('11111'); */

復制代碼

src/style2.css

body {

color: black;

}

復制代碼

7.編寫 webpack 配置文件

webpack.config.js

const path = require("path");

module.exports = {

entry: {

app: "./src/app.js"

},

output: {

publicPath: __dirname + "/dist/", // 打包后資源文件的引用會基于此路徑

path: path.resolve(__dirname, "dist"), // 打包后的輸出目錄

filename: "[name].bundle.js"

},

module: {

rules: [

{

test: /\.css$/,

// 以

use: [

{

loader: "style-loader",

options: {

singleton: true // 處理為單個style標簽,注釋掉試試看?

}

},

"css-loader"

]

}

],

// rules: [

// {

// test: /\.css$/,

// // 以標簽形式引用css

// use: [

// "style-loader/url",

// {

// loader: "file-loader",

// options: {

// name: '[name].[hash].css'

// }

// }

// ]

// }

// ]

}

};

復制代碼

總結

以上是生活随笔為你收集整理的webpack 引入css link,demo11 webpack处理css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。