图片处理
1.css背景图片的处理
我们设置一张图片背景
//a.css
body {
background: url(../images/timg.jpg) repeat-y;
}
#root {
color: yellow;
}
运行npm run dev,我们发现又报错,提示我们缺少一个loader
处理图片涉及两个loader,分别是
url-loader
file-loader
1.安装url-loader和file-loader
cnpm i file-loader url-loader -D
2.配置loader
我们在module的rules里面添加一条规则,配置处理图片的loader
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
},
{
test:/\.(png|jpg|gif)$/,
use:[{loader:'url-loader'}]
}
]
},
这时我们发现css背景图可以了
那么插入一张图片也可以使用,我们在index.js里面引入一张图片
import imgSrc from './images/timg.jpg';
let oImg = new Image();
oImg.onload = function(){
document.body.appendChild(oImg);
};
oImg.src = imgSrc;
设置是否转换为base64的图片大小,关于打包后css背景图的路径问题,背景图片输出的文件夹
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滚
use:'css-loader',
publicPath:'../' //解决css背景图的路径问题
})
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 这里的options选项参数可以定义多大的图片转换为base64
limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath:'images' //定义输出的图片文件夹
}
}]
}
]
},
现在css都打到bundle.js里面了,那么我们如何将css分离出来呢?
分离:CSS
这时需要使用到extract-text-webpack-plugin
1.安装
cnpm i extract-text-webpack-plugin -D //针对webpack3.x版本
如何最后运行报错则使用
cnpm i extract-text-webpack-plugin@next -D //针对webpack4.x版本
2.引入
const ExtractTextPlugin = require('extract-text-webpack-plugin');
3.在plugins中调用插件(配置提出来的css名称以及提到哪里)
new ExtractTextPlugin('css/index.css') //都提到index.css里面
4.css文件增加一个处理函数ExtractTextPlugin.extract提取出css出来
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滚
use:'css-loader'
})
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 这里的options选项参数可以定义多大的图片转换为base64
limit:50000 // 表示小于50kb的图片转为base64,大于50kb的是路径
}
}]
}
]
},
-
plugins:[
// Uglify是压缩js,现在已经不需要了,只需要在script里面写成
// "build": "webpack --mode production", 就自动压缩额
//new Uglify(),
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模板地址
}),
//都提到dist目录下的css目录中,文件名是index.css里面
new ExtractTextPlugin('css/index.css')
]