1、下载
cnpm install url-loader file-loader html-loader@0.5.5 -D
其中url-loader依赖于file-loader,所以必须下载file-loader
2、配置
module:{
rules:[
处理js等文件导入的图片
{
test: /\.(jpg|png|gif|jfif)$/,
loader:'url-loader',
options: { 因为依赖file-loader,所以options是继承file-loader内的
limit: 8 * 1024, 图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
esModule: false, 不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
name:'[path][name].[ext]' 照片导出名称,默认为hash值,name中带有'/'会自动生成文件夹
[ext] 资源扩展名
[name] 资源的原名称
[path] 资源相对于context的路径,!!!会将图片文件所在的根文件夹一起打包
[hash] 内容的哈希值,如:['hash:10'],提取hash前10位,更多配置如图hashes,<内容>可不写
[数字] 根据匹配结果索引选择上面的内容
outputPath:'从build目录下开始的输出路径' 输出路径如果name也写了路径,可能会有冲突
publicPath:'图片的公共路径'
}
},
处理html文档内导入的图片
{
test: /\.html$/,
loader:'html-loader', 处理html文档中的img,负责引入图片,交给url-loader处理
}
]
}
3、通过image-webpack-loader优化压缩图片(https://github.com/tcoopman/image-webpack-loader#readme)
(1)下载
cnpm install image-webpack-loader -D
mozjpeg — Compress JPEG images
optipng — Compress PNG images
pngquant — Compress PNG images
svgo — Compress SVG images
gifsicle — Compress GIF images
webp — Compress JPG & PNG images into WEBP
(2)配置
use: [
'url-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false, 禁止opting压缩,因为pngquant包含了该压缩
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
代码示例:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path:path.resolve(__dirname,'build')
},
module: {
rules: [//创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
{
test: /\.css$/, //匹配文件名
use: [//使用哪些loader
'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader', //将less文件编译成css文件
]
},
{
test: /\.(jpg|png|gif|jfif)$/,
loader:'url-loader', //依赖于file-loader
options: {
//图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
limit: 8 * 1024,
esModule: false, //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
name:'[path][name].[ext]'
}
},
{
test: /\.html$/,
loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
}
]
},
//插件
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html' //将模板复制成指定文件
}), //默认传键html文件,并引入打包输出的资源,默认为基本结构
],
mode:'development'
}