和图片一样webpack默认不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的文件类型
使用 CssLoader
安装 CssLoader
npm install --save-dev css-loader
安装 StyleLoader
npm install style-loader --save-dev
如上安装的两个 Loader 的解释如下
- css-loader：用于解析css文件中的@import依赖关系，也就是css之间的依赖关系
- style-loader：将webpack处理之后的内容插入到HTML的HEAD标签中
配置 CssLoader
修改 webpack 核心配置文件即可
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
当然，在你不配置和安装css-loader之前你打包的内容中有css的内容，那么肯定是会报错的，我就不演示报错了，我演示一下配置完了css-loader之后打包之后的效果即可
新建 index.css
@import "custom.css";
.size {
height: 200px;
}
新建 custom.css
html, body {
width: 100%;
height: 100%;
}
body {
background: skyblue;
}
修改 index.js
const icon = require("./BNTang.jpg");
const _ = require("./index.css");
let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");
document.body.appendChild(oImg);
然后进行开始打包，引入打包之后的文件运行效果图如下所示
