webpack 引入css link,demo11 webpack处理css

在 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'

// }

// }

// ]

// }

// ]

}

};

复制代码