Webpack打包图片

一、在js文件中引入图片

Webpack打包图片_第1张图片

Webpack打包图片_第2张图片

二、在package.config.js中配置加载器

Webpack打包图片_第3张图片

module.exports = {
    mode: "production", // 设置打包的模式:production生产模式  development开发模式
    module: {
        rules: [
            // 配置img加载器
            {
                test: /\.(jpg|png|gif)$/i,
                type:"asset/resource"  // 图片直接资源类型的数据,可以通过指定type来处理
            }
        ]
    }
}

打包后dist目录下成功出现打包后的图片 

Webpack打包图片_第4张图片

你可能感兴趣的:(Webpack,webpack,前端,node.js)