webpack图片处理需要下载
npm i file-loader html-loader url-loader -D文件目录
less文件
div { background-color: pink; color:#fff } .div1 { background-image: url(./成都画室1.png); width: 100px; height:100px; background-size: contain; } .div2 { background-image: url(./黑暗森林\ ¹\ 幻想艺术\ 唯美意境3440x1440壁纸_彼岸图网.jpg); width: 100px; height:100px; background-size: contain; }html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="div1">dx好帅</div> <div class="div2">dx好帅</div> /** 直接引入的图片无法成功打包，需要在webpack.config中另外配置 */ <img src="./成都画室1.png" alt=""> </body> </html>webpack.config.js
const { resolve } = require('path'); /** 引入插件 */ const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin')); module.exports = { /** 输入 */ entry: './src/index.js', /** 输出 */ output: { filename: 'bundle.js', path: resolve(__dirname, 'bundle'), publicPath:'' }, /** loader 配置 1下载 2使用(配置loader) */ module: { rules: [ { /** 对所有以.css结尾的文件进行匹配 */ test: /\.css$/, /** use执行顺序， 从右往左，从下往上 */ use: [ /** 创建一个style标签, 将js中的css样式资源插入进去，添加到页面生效 */ // 'style-loader', /** 将css文件编程commonjs模块加载js中，里面内容是样式字符串 */ // 'css-loader', { loader: 'style-loader' }, { loader: 'css-loader', }, ], }, { /** 对所有以.css结尾的文件进行匹配 */ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.scss/, //配置sass转css use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }, ], }, { /** webpack 处理图片的的配置, * 缺点 没办法处理html中直接引入的图片 */ test: /\.(jpg|jpge|png|gif)$/, /** 当只需要用loader时可以这样写,需要下载两个包 url-loader file-loader * 因为url-loader 依赖于 file-loader * */ loader: 'url-loader', /** options可以配置图片处理的情况 */ options: { /** limit 限制8kb一下的图片转为base64 * 优点 图片转为base64以后,加载图片不再需要请求服务器，减轻服务器压力 * 缺点 图片转为base64会造成图片体积变大的问题,因此本身太大的图片不适合转为base64 * */ limit: 8 * 1024, /** 将处理后的图片命名规则，hash:10 指的是命名hash保留10位，ext保留原有的后缀名 */ name: [hash:10].[ext], /** 关闭es6模块 */ //esModule:false }, }, { /** 为了弥补html中直接引入的图片无法打包的问题，使用html-loader， */ test: /\.html$/, loader: 'html-loader' } ], }, /** 插件配置 1下载 2引入 3使用 */ plugins: [ /** 可以多次使用,生成多个html文件 */ new HtmlWebpackPlugin(), /** 插件实现的功能 默认会创建一个空的html,自动引入打包输出的所有资源 */ new HtmlWebpackPlugin({ /** 将路径的html复制一份，自动引入打包输出的所有资源 */ template: './src/index.html', // alwaysWriteToDisk: true, /** 创建的html的名字，如果不设置默认为index.html */ filename: 'text.html', title: 'dx', }), ], /** 模式开发模式 development 或者生产模式 production */ mode: 'development', };实现效果
ps: 我在webpack.config.js配置的过程中，outPut一开始没有publicPath:’'字段,导致报错
Error: Automatic publicPath is not supported in this browser输出非正常的html文件
Html Webpack Plugin: <pre> Error: C:\Users\ibaiwei\Desktop\webpack\webpack打包样式资源\src\index.html:136 /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); ^ Error: Automatic publicPath is not supported in this browser - index.html:136 C:/Users/ibaiwei/Desktop/webpack/webpack打包样式资源/src/index.html:136:34 - index.html:139 C:/Users/ibaiwei/Desktop/webpack/webpack打包样式资源/src/index.html:139:13 - index.html:146 C:/Users/ibaiwei/Desktop/webpack/webpack打包样式资源/src/index.html:146:12 - index.js:121 HtmlWebpackPlugin.evaluateCompilationResult [webpack打包样式资源]/[_html-webpack-plugin@5.0.0-alpha.6@html-webpack-plugin]/index.js:121:28 - index.js:297 [webpack打包样式资源]/[_html-webpack-plugin@5.0.0-alpha.6@html-webpack-plugin]/index.js:297:26 - task_queues.js:93 processTicksAndRejections internal/process/task_queues.js:93:5 - async Promise.all - async Promise.all </pre>解决的方法: 在webpack.config.js中的output中添加publicPath:‘打包后img文件的路径’
其他问题 在webpack之前的版本中，使用html-loader，解析的img可能会异常 url-loader默认使用es6 而html-loader引入的图片是commonJS,无法被url-loader正确识别，
解决的办法：关闭url-loader使用的es6模块 给url-loader加一个配置项 esModule：false
{ /** webpack 处理图片的的配置, * 缺点 没办法处理html中直接引入的图片 */ test: /\.(jpg|jpge|png|gif)$/, /** 当只需要用loader时可以这样写,需要下载两个包 url-loader file-loader * 因为url-loader 依赖于 file-loader * */ loader: 'url-loader', /** options可以配置图片处理的情况 */ options: { /** limit 限制8kb一下的图片转为base64 * 优点 图片转为base64以后,加载图片不再需要请求服务器，减轻服务器压力 * 缺点 图片转为base64会造成图片体积变大的问题,因此本身太大的图片不适合转为base64 * */ limit: 8 * 1024, /** 在之前的版本中，现在已经修复 url-loader默认使用es6 而html-loader引入的图片是commonJS,无法被url-loader正确识别， * 用于关闭url-loader的es6模块 */ esModule: false }, },