前言:
图片在每个网站设置页码都是必不可少的，性能等等方面也是占用相当大的比率，webpack也支持对图片的处理
在 css 文件或者 sass 文件中添加如下代码
$red: #900;
$size: 20px;
.box {
height: 30px*2;
font-size: $size;
transform: translate3d( 0, 0, 0 );
+ background: url('../static/1.jpeg')
}
运行打包发现如下错误：
ERROR in ./src/static/1.jpeg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
webpack打包时出现的错误截图
解决方案：file-loader处理文件的导入
npm install --save-dev file-loader
webpack.config.js
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'
]
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
此时运行打包，发现 dist 目录多了一个图片文件，另外报错不再出现。
那更进一步，图片如何进行优化呢？
image-webpack-loader可以帮助我们对图片进行压缩和优化。
npm install image-webpack-loader --save-dev
使用：webpack.config.js
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'
]
},
{
test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
use: [
'file-loader',
+ {
+ loader: 'image-webpack-loader',
+ options: {
+ mozjpeg: {
+ progressive: true,
+ quality: 65
+ },
+ optipng: {
+ enabled: false,
+ },
+ pngquant: {
+ quality: '65-90',
+ speed: 4
+ },
+ gifsicle: {
+ interlaced: false,
+ },
+ webp: {
+ quality: 75
+ }
+ }
+ },
]
}
]
}
};
此时在运行 webpack，发现会 生成的图片的大小会被压缩很多。
