webpack使用file-loader

文件目录格式

捕获.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 参数
                        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)

github地址