webpack打包图片资源主要分两个方面的配置
一、打包css文件中的图片资源，需要用到file-loader、url-loader，相关配置如下
const path = require(‘path‘) const htmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { entry: "./src/main.js", output:{ filename: ‘index.js‘, path:path.resolve(__dirname, ‘build‘) }, module:{ rules:[ { test: /\.css$/, use:[ "style-loader", "css-loader" ] }, { test: /\.(jpg|png|gif)$/, loader:"url-loader", //url-loader依赖于file-loader options:{ limit: 8 * 1024 //图片小于8kb就是用base64的方式 } } ] }, plugins:[ new htmlWebpackPlugin({ template:"./src/index.html" }) ], mode:‘development‘ }
二、打包html中的图片资源，主要是用到html-loader html-loader的作用是引入图片资源，然后让url-loader去解析。相关配置如下
const path = require(‘path‘) const htmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { entry: "./src/main.js", output:{ filename: ‘index.js‘, path:path.resolve(__dirname, ‘build‘) }, module:{ rules:[ { test: /\.css$/, use:[ "style-loader", "css-loader" ] }, { test: /\.(jpg|png|gif)$/, loader:"url-loader", options:{ limit: 8 * 1024 } }, { test: /\.html$/, loader:"html-loader", } ] }, plugins:[ new htmlWebpackPlugin({ template:"./src/index.html" }) ], mode:‘development‘ }