webpack 学习笔记：引入 CSS（上）
23 / 0 / 创建于 3年前 /
zhangbao 的个人博客
本篇文章介绍如何在 webpack 中使用 CSS。
webpack 默认只能解析 .js 文件和 .json 文件。如果是 CSS 的话，就需要额外引入 css-loader 和 style-loader 来处理了。
引入 CSS 资源
首先安装下依赖：
npm install --save-dev style-loader css-loader然后修改下配置，添加对 CSS 文件的解析支持：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}style.css
.hello {
color: red;
}接下来在 src/index.js 中引入：
import join from 'lodash/join';
import './style.css';
function component() {
const element = document.createElement('div');
element.innerHTML = join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}
document.body.appendChild(component());重新构建项目 npm run build，就能看到红色的 Hello webpack 了。
可以看见，style.css 里的内容以 <style> 标签的形式插入到了 <head> 中——这正是 style-loader 所做的事情。而 css-loader 做的，是处理以 .css 后缀引入的资源，将文件内容装换为 webpack 理解的 CommonJS 代码格式。
使用图片
CSS 难免会碰到引用图片的场景，我们试着在 style.css 中引入图片试试。
.hello {
color: red;
+ background: url("./images/demo.jpeg");
}然后编译，发现会有报错：
ERROR in ./src/images/demo.jpeg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders这是因为 webpack 不能正确解析 demo.jpeg 的原因，为此需要安装 file-loader 来处理图片解析。
npm install --save-dev file-loaderconst path = require('path');
module.exports = {
...
module: {
rules: [
...
{
test: /\.(png|svg|jpe?g|gif)$/,
use: [
'file-loader'
]
}
]
}
};再次解析，发现就可以了。
npm run build
...
Asset Size Chunks Chunk Names
bundle.js 21.4 KiB main [emitted] main
c23c4a29e2a53a448534478a15da11f5.jpeg 58 KiB [emitted] [immutable]
...
当然，我们还可以使用 url-loader 来替换 file-loader，对图片资源做进一步的控制：base64 编码。
url-loader 的介绍如下：
url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.
下面我们修改下配置，让 url-loader 来处理图片。
npm install url-loader --save-dev// {
// test: /\.(png|svg|jpe?g|gif)$/,
// use: [
// 'file-loader'
// ]
// },
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
loader: 'url-loader',
options: {
limit: 81920,
},
}低于 80KB (81920 / 1024 = 80)的文件（注：这里只是作为演示使用，实际项目 8KB 就足够了）会被 base64 处理，嵌入到打包文件中，而不单独作为文件输出。
...
Asset Size Chunks Chunk Names
bundle.js 99 KiB main [emitted] main
...成功。
（完）
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号