npm i css-loader style-loader -D
注意：需要下载两个 loader
css-loader：负责将 Css 文件编译成 Webpack 能识别的模块style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容此时样式就会以 Style 标签的形式在页面上生效
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
],
},
plugins: [],
mode: "development",
};
.box1 {
width: 100px;
height: 100px;
background-color: pink;
}
import { add } from "./math";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
console.log("世纪难题：1 + 1 = ", add(1, 1));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<script src="../dist/main.js"></script>
</body>
</html>
npx webpack
打开 index.html 页面查看效果