文件目錄格式
捕獲.JPG
- webpack.config.js
- 安裝loader
npm install -D file-loader url-loader //url-loader是file-loader的封裝至耻，功能比file-loader多
-
const path = require('path')
module.exports ={
mode:'development',
entry:{
main:'./src/index.js' //入口
},
module:{
rules:[
{
test:/\.(jpg|png)$/, //正則匹配
use:{//匹配到的使用這個loader
loader:'url-loader',
options:{ //loader 參數(shù)
name:'[name].[ext]',//名字
limit: 14000,//pic大小小于url 時會變成data json存儲在url里
outputPath:'img/', 輸出文件夾
publicPath:'dist/img' //打包后引用的url前加上 publicpath
}
}
},
// {
// test:/\.(jpg|png)$/,
// use:{
// loader:'file-loader',
// options:{
// name:'[name].[ext]',
// outputPath:'img/'
// }
// }
// }
]
},
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}
}
- index.js
import pic from '../asserts/pic.jpg'
import url from '../asserts/url.png'
let app = document.getElementById('app')
var img1 = new Image()
var img2 = new Image()
img1.src = pic
img2.src = url
app.append(img1)
app.append(img2)
console.log(pic)
console.log(url)
