04webpack样式、图片处理
样式处理
css-loader style-loader插件
-
安装css-loader style-loader
npm install css-loader style-loader -D -
在webpack.config.js中添加配置
// 详细loader配置
// 规则 css-loader 连续 @import这种语法的
// style-loader 它是把CSS插入到head的标签中
// loader的特点 希望单一
// { test: /\.css$/, use: 'css-loader'}
// loader的用法 字符串只用一个loader
// 多个loader需要 []
// loader的顺序 默认是从右到左执行 从下到上执行
// { test: /\.css$/, use: ['style-loader','css-loader']}
// loader还可以写成 对象方式 多写个参数,方便传参
{
// 匹配哪些文件
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
less-loader插件
-
安装less-loader
npm install less less-loader -D -
在webpack.config.js中添加配置
执行顺序是从右向左,从下到上
{
// 可以处理less文件,还有sass stylus node-sass sass-loader
// stylus stylus-loader
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader', // @import 解析import路径
options: {
modules: true
}
},
{
loader: 'less-loader' // 把less -> css 先解析less再执行css
}
]
}
抽离CSS插件:mini-css-extract-plugin插件
- 安装mini-css-extract-plugin
npm install mini-css-extract-plugin -D - 在webpack中引用mini-css-extract-plugin插件
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
3.在webpack.config.js中配置相应的参数
A.在plugins中配置相应的插件
plugins:[ // 数组 放着所有的插件
new MiniCssExtractPlugin({
filename: 'main.css'
})
],
B.module中配置相应的配置
module: { //模块
rules: [
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签,将js中的样式资源插入进去,添加到head中生效
// 'style-loader',
// 这个loader取代style-loader,作用:提取js中css成单独css文件
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader' // 把less -> css 先解析less再执行css
]
}
]
}
样式前缀插件:postcss-loader autoprefixer
- 安装postcss-loader autoprefixer
npm install postcss-loader autoprefixer -D
图片处理
打包图片资源:url-loader file-loader
- 安装url-loader file-loader
npm install url-loader file-loader -D
2.在webpack.config.js中配置相应的参数
module: { //模块
rules: [
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签,将js中的样式资源插入进去,添加到head中生效
'style-loader',
'css-loader',
'postcss-loader' // 把less -> css 先解析less再执行css
]
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 有点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(问价请求速度更慢)
limit: 8 * 1024
}
}
]
}
注意:默认处理不了html中image图片,如果需要处理html中的文件,还要下载html-loader插件,相关配置如下
module: { //模块
rules: [
// 详细loader配置
// 规则 css-loader 连续 @import这种语法的
// style-loader 它是把CSS插入到head的标签中
// loader的特点 希望单一
// { test: /\.css$/, use: 'css-loader'}
// loader的用法 字符串只用一个loader
// 多个loader需要 []
// loader的顺序 默认是从右到左执行 从下到上执行
// { test: /\.css$/, use: ['style-loader','css-loader']}
// loader还可以写成 对象方式 多写个参数,方便传参
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签,将js中的样式资源插入进去,添加到head中生效
'style-loader',
'css-loader',
'postcss-loader' // 把less -> css 先解析less再执行css
]
},
{
// 可以处理less文件,还有sass stylus node-sass sass-loader
// stylus stylus-loader
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'postcss-loader', // 把less -> css 先解析less再执行css
'less-loader' // 把less -> css 先解析less再执行css
]
},
{
// 问题:默认处理不了html中image图片
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb,就会被base64处理
// 有点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(问价请求速度更慢)
limit: 8 * 1024,
// 问题:因为url-loader默认使用es6模块化解析,而html-loader引入图片是common.js
// 解析时会出问题:[object Module]
// 解决:关闭url-loader的es6模块化,使用common.js解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name:'[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: 'html-loader'
}
]
}
砥砺前行