先来中文网链接url-loader
安装
npm install --save-dev url-loader
配置:
#1.当图片小于limint时的配置,但是当图片大于limit时打包会报错
所以还需要进一步配置
-------2、------注释
const path = require('path')
module.exports = {
entry: './src/min.js', //入口
output: {
path: path.resolve(__dirname, 'dist'),//动态获取路径
filename: 'bundle.js'
}, //出口
module: { //配置loader
rules: [ //规则
{
test: /\.css$/,
// webpack的读取顺序,从右向左依次执行
// css-loader只负责将css文件进行加载
// style-loader则负责将样式进行挂载到DOM元素上
use: ['style-loader','css-loader']
},
// 官网的直接复制粘贴
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings 3.在将css挂载到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS 2.在将css模块引入
}, {
loader: "less-loader" // compiles Less to CSS 1.先将less转css
}]
},
// 官网的直接复制粘贴
//------2、------
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片小于limit时,会将图片编译成base64字符串形式
limit: 13000
}
}
]
}
]
}
}
#2.当图片大于limit
报错如图:当图片小于limit就用url-loader,当图片大于limit就需要file-loader这个模块,直接npm install --save-dev file-loader下载就好,不需要配置
打包完成后,虽然没有报错,但是背景依然显示不出来
因为index.html暂时没有进行打包配置还在原路径webpack打包后,图片的名字发生了变化,并且打包后图片的路径也发生了变化
解决:
在output中添加配置路径
如:----1、-----注释
等以后index.html文件也配置了打包,就需要这个路径了
const path = require('path')
module.exports = {
entry: './src/min.js', //入口
output: {
path: path.resolve(__dirname, 'dist'),//动态获取路径
filename: 'bundle.js',
publicPath:'dist/' //----1、-----打包后会在任何url上面拼接上dist/路径
}, //出口
module: { //配置loader
rules: [ //规则
{
test: /\.css$/,
// webpack的读取顺序,从右向左依次执行
// css-loader只负责将css文件进行加载
// style-loader则负责将样式进行挂载到DOM元素上
use: ['style-loader','css-loader']
},
// 官网的直接复制粘贴
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings 3.在将css挂载到DOM
}, {
loader: "css-loader" // translates CSS into CommonJS 2.在将css模块引入
}, {
loader: "less-loader" // compiles Less to CSS 1.先将less转css
}]
},
// 官网的直接复制粘贴
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片小于limit时,会将图片编译成base64字符串形式
limit: 13000
}
}
]
}
]
}
}
效果图:
二、打包后图片路径和名字的设置
#1.打包后,webpack为了防止名字冲突,使用了32位hash值进行命名,但是不方便开发查看文件,同时文件全部在dist目录,导致文件杂乱
解决方法:------3、-------注释
// 官网的直接复制粘贴
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载图片小于limit时,会将图片编译成base64字符串形式
limit: 13000,
// ------3、------
// img(文件夹)
// [name](文件的原名称)
// .[[hash:8](截取8位hash)
// .[ext](文件原格式)
name:'img/[name].[hash:8].[ext]'
}
}
]
}