一：只處理圖片地址
- 安裝file-loader
- 配置rules，規(guī)則
// 處理圖片地址
{
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, // 使用一個(gè)style標(biāo)簽
//transform: './css.transform.js' // transform 是css的變形函數(shù),相對于webpack.config的路徑
}
},
// 繼續(xù)處理的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'], //指定某一個(gè)入口，只會把入口相關(guān)載入html
minify: { // 壓縮html
collapseWhitespace: true // 空格
}
})
]
};
二 配置小于多少使用base64處理圖片
- 安裝url-loader
- 同樣配置rules，規(guī)則
// 使用url-loader
{
loader: 'url-loader',
options: {
outputPath: 'assets/images', //指定圖片路徑
limit: 30000 // 小于30k使用base64編碼
}
}
三配置壓縮圖片
- 安裝img-loader
- 在下面繼續(xù)配置rules規(guī)則
{
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, // 使用一個(gè)style標(biāo)簽
//transform: './css.transform.js' // transform 是css的變形函數(shù),相對于webpack.config的路徑
}
},
// 繼續(xù)處理的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'], //指定某一個(gè)入口，只會把入口相關(guān)載入html
minify: { // 壓縮html
collapseWhitespace: true // 空格
}
})
]
};
