webpack处理图片
2018-04-07 本文已影响0人
会飞的猪bzy
一：只处理图片地址
- 安装file-loader
- 配置rules，规则
// 处理图片地址
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets/images', //指定图片路径
//useRelativePath: true
}
}
]
}
所有配置
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]-bundle-[hash:5].js' // 带hash值得js
},
// 配置resolve把jQuery解析到想要的目录
resolve: {
alias: {
jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
}
},
module: {
// 使用ExtractTextWebpackPlugin
rules: [
{
test: /\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback: {
loader: 'style-loader', // 可以把css放在页面上
options: {
singleton: true, // 使用一个style标签
//transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
}
},
// 继续处理的loader
use: [
{
loader: 'css-loader', // 放在后面的先被解析
options: {
minimize: true,
modules: true,
localIdentName: '[local]'
}
},
{
loader: 'less-loader'
}
]
})
},
{ // 加载jQuery
test: path.resolve(__dirname, 'src/app.js'),
use: [
{
loader: 'imports-loader',
options: {
$: 'jquery'
}
}
]
},
// 处理html中路径
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
]
},
// 处理图片地址
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'assets/images', //指定图片路径
//useRelativePath: true
}
}
]
}
]
},
plugins: [
// 提取css文件
new ExtractTextWebpackPlugin({
filename: '[name]-min-[hash:5].css',
allChunks: true // 一开始所有css都打包
}),
new HtmlWebpackPlugin({
template: './index.html', // 文件地址
filename: 'index.html', // 生成文件名字
// inject: false, // 不把生成的css，js插入到html中
chunks: ['app'], //指定某一个入口，只会把入口相关载入html
minify: { // 压缩html
collapseWhitespace: true // 空格
}
})
]
};
二 配置小于多少使用base64处理图片
- 安装url-loader
- 同样配置rules，规则
// 使用url-loader
{
loader: 'url-loader',
options: {
outputPath: 'assets/images', //指定图片路径
limit: 30000 // 小于30k使用base64编码
}
}
三配置压缩图片
- 安装img-loader
- 在下面继续配置rules规则
{
loader: 'img-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
全部配置
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]-bundle-[hash:5].js' // 带hash值得js
},
// 配置resolve把jQuery解析到想要的目录
resolve: {
alias: {
jquery$: path.resolve(__dirname, 'src/lib/jquery.min.js')
}
},
module: {
// 使用ExtractTextWebpackPlugin
rules: [
{
test: /\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback: {
loader: 'style-loader', // 可以把css放在页面上
options: {
singleton: true, // 使用一个style标签
//transform: './css.transform.js' // transform 是css的变形函数,相对于webpack.config的路径
}
},
// 继续处理的loader
use: [
{
loader: 'css-loader', // 放在后面的先被解析
options: {
minimize: true,
modules: true,
localIdentName: '[local]'
}
},
{
loader: 'less-loader'
}
]
})
},
{ // 加载jQuery
test: path.resolve(__dirname, 'src/app.js'),
use: [
{
loader: 'imports-loader',
options: {
$: 'jquery'
}
}
]
},
// 处理html中路径
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
]
},
// 处理图片地址
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
// 使用url-loader
{
loader: 'url-loader',
options: {
outputPath: 'assets/images', //指定图片路径
limit: 10000 // 小于10k使用base64编码
}
},
{
loader: 'img-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}
]
},
plugins: [
// 提取css文件
new ExtractTextWebpackPlugin({
filename: '[name]-min-[hash:5].css',
allChunks: true // 一开始所有css都打包
}),
new HtmlWebpackPlugin({
template: './index.html', // 文件地址
filename: 'index.html', // 生成文件名字
// inject: false, // 不把生成的css，js插入到html中
chunks: ['app'], //指定某一个入口，只会把入口相关载入html
minify: { // 压缩html
collapseWhitespace: true // 空格
}
})
]
};
