webpack处理静态资源-图片、字体图标：

最新推荐文章于 2024-06-02 21:27:33 发布

小强有个dream

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量135

点赞数 3

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_36413371/article/details/138958277

版权

处理图片

如果你需要更细粒度的控制，或者你的项目中有一些特殊需求（例如，根据文件大小或类型进行不同的处理），那么 file-loader 或 url-loader 可能更适合你。如果你正在使用 Webpack 5 或更高版本，并且希望简化配置，那么 asset/resource 这个内置资源模块可能是一个很好的选择。

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
      })
    ],
    mode: 'production',
    module: {
      rules: [
        {
          test: /\.(png|jepg|gif|svg)(\?.*)?$/,
          type: 'asset/resource'
        }
      ]
    }
}

src/index.js
import Img from './assets/images/test.png'

const img = document.createElement('img')
img.src = Img
img.style.width = '200px'
img.style.height = '200px'
document.body.appendChild(img)