webpack配置-打包图片资源

项目目录：

对于webpack4 来说的话，只要安装url-loader, file-loader就可以的

npm i html-loader url-loader file-loader -D

webpack.config.js配置

module: {rules: [{test: /\.(webp|jpe?g|png|gif)/i,use: [{loader: 'file-loader',options: {outputPath: 'img',esModule: false, // 必须配置这个name: '[name]-[hash:6].[ext]'}}],type: 'javascript/auto'},]}

对于webpack5来说的话，无需按照上面两个插件

module: {rules: [{test: /\.(jpe?g|png|webp|gif)/i,type: 'asset/resource',generator: {filename: 'static/[hash][ext][query]'},parser: {dataUrlCondition: {maxSize: 100 * 1024 // 100kb7}}},
]}```

webpack配置-打包图片资源相关推荐

webpack打包图片资源问题
在实际应用中有以下几种图片的引用方式: HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div sty ...
webpack的使用、安装和配置打包的入口和出口
webpack的基本使用在这里我使用VScode为编辑器讲解隔行变色案例第一步:创建项目空白文件,并在终端中运行npm init -y 命令.初始化包管理配置文件package.json 第二步 ...
webpack自动打包功能配置
当我们在js中修改后,在浏览器打开html文件并没有任何变化,这是因为引入的js文件是之前打包的js文件,如果要实现修改后的js有变化,需要在重新打包一次,这样就大大的增加了我们的工作量,所以这儿就用 ...
webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能
配置打包的入口与出口 const path = require('path') // 导入 node.js 中专门操作路径的模块 module.exports = { entry: path.join ...
webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
webpack多个Html,少量修改webpack配置支持打包多页面
webpack一般是配合单页面应用使用,但并不是所有的web应用都是单页的,有多个页面的情况还是很多的,当然你可以用其它的构建工具来打包,但对于习惯了webpack的你来说,要是能直接在webpack ...
webpack打包压缩混淆_细说webpack系列 3. webpack-cli 零配置打包
大家好!我是萝卜,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目首先创建项目,创建一个名为webpack的文件夹,进入文 ...
webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
webpack配置排除打包
目标1:webpack配置排除打包-打包瘦身通过配置vue-cli把一些平常不需要用的包排除在打包文件之外. 例如:让 webpack 不打包 vue xlsx 和 element 使用方式先找到 ...

webpack配置-打包图片资源

webpack配置-打包图片资源相关推荐

最新文章

热门文章