webpack-css-loader

和图片一样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);

然后进行开始打包，引入打包之后的文件运行效果图如下所示