Webpack file-loader 打包图片等静态资源

file-loader可以打包多种静态资源，例如{jpg|png|gif|...}等

index.js

var picture = require('./picture.jpg')

在webpack配置文件中module属性添加rules，用正则匹配文件后缀，然后分别交由指定的loader处理

webpack.config.js

const path = require('path')

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.jpg$/,
            use: {
                loader: 'file-loader'
            } 
        }]
    }
}

file-loader打包动作分为两步

1. 把静态资源复制一份到dist/下
2. 移动后起个新名字，并返回资源在dist目录下的地址给index.js导入的变量