样式处理
了解 loader
❝在解析打包样式之前，先要了解 webpack 中的 loader
❞
- loader 对于模块代码的转换，可以预处理文件
- loader 有两个属性
- test：匹配出文件，是一个正则表达式
- use：使用哪种 loader 进行解析
安装 css-loader
yarn add css-loader -D
- 解析
@import和require语法，可以把 css 当做一个模块 - 继续对
webpack.config.js进行改造，增加「module」字段 - 「module」字段下有一个「rules」数组
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
open: true,
progress: true
},
entry: './src/index.js',
output: {
filename: 'build.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: '测试',
minify: false,
template: path.resolve(__dirname, 'src/index.html'),
filename: 'test.html'
})
]
}
- 在src目录下新建一个css文件夹，并在css文件夹内新建「index.css」和「a.css」
- 然后再src下「index.js」文件里引入这个「index.css」
- 在「index.css」里面引入「a.css」
- 现在可以把「a.css」和「index.css」打包在一起了，但是并不能插入到页面里面，所以还需要安装一个
style-loader
安装 style-loader
yarn add css-loader -D
- 把 css 插入到
<head></head>中 - loader 如果只有一个的话可以是一个字符串，如果是多个需要一个数组
- loader 还可以是一个对象方式，options 可以传入 loader 的一些配置
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
}
}
]
loader 的顺序，从右向左执行，从下向上执行
现在改一下「webpack.config.js」
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
❝现在打包后运行「dist」目录下的「test.html」发现「body」背景是红色的，字体是白色
❞
