webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin

简介: webpack打包图片资源,图片不显示和index.html,HtmlWebpackPlugin

安装相对应的版本号 防止报错
在这里插入图片描述
先看目录结构:创建个img文件夹存放图片
在这里插入图片描述
我们在style.css文件引入图片方便看运行效果
在这里插入图片描述
在程序打包主入口引入style.css
在这里插入图片描述

安装 file-loader 依赖
提示最新版的webpack已经内置了不需要在安装
下面配置规则需注意 已经在下文代码区分
例如版本"webpack": "^5.74.0",

npm install --save-dev file-loader@4.0.0

在webpack.config.js进行配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',//production development开发环境不压缩dist 
    entry: './src/main.js', 
    output: {
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    module: { // 模块      
        rules: [ // 规则   
            {
                test: /\.css$/i, // 正则表达式,匹配 .css 文件资源        
                use: [  // 使用的 Loader ,注意顺序不能错           
                    'style-loader',//js识别css
                    'css-loader'//将css转换为js
                ]
            },
            //这里是配置打包图片的
            {
                test: /\.(png|svg|jpg|gif)$/i,
                use: [
                    'file-loader'
                ]
            }
          // 最新版的webpack使用方式(webpack内置)
           {
            test: /\.(png|svg|jpg|gif)$/i,
            type:'asset/resource'
            }
        ]
    }
}

打包编译:

bpm  run  build

dist下生成一个打包后的图片
在这里插入图片描述

报错问题:

在这里插入图片描述

**访问根目录下的 index.html, 背景图并未显示出来
控制台显示的是 background-image: url(974db94e3c226840f3cededb0dc51e66.png
因为我们书写代码的时候在style.css文件引入的 图片的路径是../img/1645773893.png
但是我们打包后会在dist文件下生成随即名的图片 这个才是浏览器最终使用的
因为路径不对访问不到
所以我们需要把index.html放在dist目录下**

解决:
使用 HtmlWebpackPlugin 插件

**作用:解决文件路径问题将 index.html 打包到 bundle.js 所在目录中(dist)
同时也会在 index.html 中自动的 script标签 引入 bundle.js**

npm install --save-dev html-webpack-plugin@4.5.0

webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',//production development开发环境不压缩dist 
    entry: './src/main.js',
    plugins: [
        new HtmlWebpackPlugin({
           template:'./index.html'
        })
    ],
    output: {
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    module: { // 模块      
        rules: [ // 规则   
            {
                test: /\.css$/, // 正则表达式,匹配 .css 文件资源        
                use: [  // 使用的 Loader ,注意顺序不能错           
                    'style-loader',//js识别css
                    'css-loader'//将css转换为js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

在这里插入图片描述
在这里插入图片描述
重新打包:

npm  run build

**index.html打包到dist文件夹里面 这样图片和index.html是相同的目录 浏览器的图片路径
background-image: url(21b04b956bdf9c6d99bfaa06b6a28a0d.png)刚好可以访问到**
在这里插入图片描述
运行index.html正常显示图片
在这里插入图片描述

相关文章
|
19天前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
11天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
38 1
|
19天前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
|
13天前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
59 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
17天前
|
移动开发 JavaScript 前端开发
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
这篇文章主要介绍了如何通过配置Webpack的插件,如HtmlWebpackPlugin、uglifyjs-webpack-plugin和webpack-dev-server,来简化前端开发流程。
27 0
webpack学习四:使用webpack配置plugin,来使用HtmlWebpackPlugin、uglifyjs-webpack-plugin、webpack-dev-server等插件简化开发
|
20天前
HTML图片
【10月更文挑战第4天】HTML图片。
18 2
|
11天前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
2月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
33 5
|
13天前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器