一,图片处理
图片处理的场景
- CSS中引入的图片
- 自动合成雪碧图
- 压缩图片
- Base64 编码
用到的技术或插件
- file-loader //css中引入图片
- url-loader //base64 编码
- img-loader //压缩图片
- postcss-sprites //合成雪碧图
1,安装所需插件
npm install file-loader url-loader img-loader postcss-sprites imagemin imagemin-pngquant --save-dev
2,file-loader 引入图片
//配置webpack.config.js
module:{
rules:[
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'file-loader',
options:{
// limit:'1024',
name:'[name].[ext]', //输出图片的原名。name:文件名。ext:文件后缀名
publicPath:'assets/imgs/',
outputPath:'assets/imgs/' //将文件打包到dist文件的assets/imgs/中
}
}
]
}
]
}
3,url-loader base64 编码
//配置webpack.config.js
module:{
rules:[
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:1024, // 表示小于1MB的图片转为base64,大于1MB的是路径
name:'[name].[ext]', //输出图片的原名。name:文件名。ext:文件后缀名
publicPath:'assets/imgs/', //将文件打包到dist文件的assets/imgs/中
outputPath:'assets/imgs/' //将文件打包到dist文件的assets/imgs/中
}
}
]
}
]
}
4,img-loader 压缩图片
图片压缩需要使用img-loader,除此之外,针对不同的图片类型,还要引用不同的插件。比如,我们项目中使用的是 png 图片,因此,需要引入imagemin imagemin-pngquant,并且指定压缩率。需要安装imagemin imagemin-pngquant:npm install imagemin imagemin-pngquant --save-dev
module:{
rules:[
{
test:/\.(png|jpg|jpeg|gif)$/,
use:[
{
loader:'url-loader',
options:{
limit:1024, // 表示小于1MB的图片转为base64,大于1MB的是路径
name:'[name].[ext]', //输出图片的原名。name:文件名。ext:文件后缀名
publicPath:'assets/imgs/', //将文件打包到dist文件的assets/imgs/中
outputPath:'assets/imgs/' //将文件打包到dist文件的assets/imgs/中
}
},
{
loader: 'img-loader',
options: {
plugins: [
require('imagemin-pngquant')({
quality: '80' // 图片压缩率
})
]
}
}
]
}
]
}
5,postcss-sprites 生成雪碧图
GitHub:https://github.com/2createStudio/postcss-sprites
module:{
rules:[
{
test:/\.less$/,
use:ExtractTextWebpackPlugin.extract({
fallback:{
loader:'style-loader',
options:{
insertInto:'#app', //插入到dom
singleton:true, //是否只使用一个style标签
transform:'./css.transform.js' //转化,浏览器环境下,插入页面前
// insertAt //插入的位置
}
},
use:[
{
// css-loader
// options
// alias (解析的别名)
// inportLoader (@import)
// Minimize (是否压缩)
// modules (是否启用css-modules)
// css-modules
// :local 给定一个本地的,局部的样式
// :global 给定一个全局的样式
// compose 可以继承一段样式
// compose ... from path 从别的文件中引入样式
loader:'css-loader'
// options:{
// minimize:true
// }
// loader:'file-loader'
},
{
loader:'postcss-loader', //这个要放在css-loader和less-loader之间
options:{
ident:'postcss',
plugins:[
require('postcss-sprites')({ //生成雪碧图
spritePath:'assets/imgs/sprites', //生成到指定的文件夹下
retina:true //定义是否在文件名中搜索视网膜标记
}),
require('autoprefixer')(), //可以在这里引入,也可以在上面引入
require('postcss-cssnext')()
]
}
},
{
loader:'less-loader'
}
]
})
}
],
},
二,字体文件处理
暂无
三,处理第三方JS库(providePlugin、imports-loader)
用到的技术或插件
webpack.providePlugin
imports-loader
window
1,可以通过cdn引入第三方库,这里以jquery为例
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
2,通过本地安装jquery插件(webpack.providePlugin) npm install jquery --save-dev
//安装插件
npm install jquery --save-dev
//webpack.config.js
plugins:[
new webpack.ProvidePlugin({
$:'jquery'
})
]
3,下载到本地的jquery文件(webpack.providePlugin)
//webpack.config.js
module.exports = {
resolve:{
alias:{
jquery$:path.resolve(__dirname,'src/libs/jquery.min.js')
}
},
plugins:[
new webpack.ProvidePlugin({
$:'jquery'
})
]
}
4,下载到本地的jquery文件(imports-loader)
//安装插件
npm install imports-loader --save-dev
//webpack.config.js
module:{
rules:[
{
test:path.resolve(__dirname,'src/app.js'),
use:[
{
loader:'imports-loader',
options:{
$:'jquery'
}
}
]
}
],
},