//现创建一个背景图片
let bagImg = document.createElement('div')
bagImg.className = 'bagImg'
document.body.appendChild(bagImg)
//需要安装 一个 依赖 file-loader
// npm install file-loader
//在 webpack.config.js里面配置
const { options } = require('less')
const path = require('path')
module.exports = {
entry: './src/main.js',//出口名字
output: {
path: path.resolve(__dirname, './build'),//打包文件家的名字
filename: 'main.js'//打包出来的.js的名字
},
module: {
rules: [
{//创建css-loader
test: /\.css$/,//匹配css字符
// 语法糖（loader: "css-loader"）
// loader: "css-loader"
// 完整写法
use: [//从下到上执行
"style-loader",
"css-loader",
]
},
// 配置less
{
test:/\.less$/,//匹配less
use:[
"style-loader",
"css-loader",
"less-loader"
]
},
// 配置图片（这里是配置背景图片和img图片）
{
test:/\.(gif|pan|jpeg|svg)$/,
use:{
loader:'file-loader',
options:{
// outputPath:'img',//设置打包成功后图片的文件夹名字
name:'img/[name]_[hash:6].[ext]',//[name]:站位 [hash:6]:hash意思是阿西值站6为 ,[ext]: 匹配图片的扩展名字 列入 .png或者其他 等
}
}
}
]
}
}webpack打包 配置背景图和 img图片的使用
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 当项目需要放到服务器子目录时候,会遇到这个图片打包问题,处理方法有两个:#A和#B #A 给所有资源配置相对路径'...
- 从零开始学习webpack打包，在网上找了很多资料，最终得到了一个自己比较满意的结果，此项目可以将css文件下的n...
- 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。但当部署到带有文件夹的项...
- 主要是 loader 后的 {publicPath: './'} 背景图片的路径在打包后的什么位置, 就可以在...
- 解决办法： body{ width: 100%; background-image:url('url); back...
