在 webpack 5 中，可以通过内置的 Asset 模块，不用再引入对应的loader，就可以轻松地将images图片相关的资源内容轻松引入我们的系统中。

初始化示例工程

首先创建一个示例工程目录：webpack-image，然后用npm进行初始化，接着在本地安装 webpack相关内容：

mkdir webpack-image
cd webpack-image
npm init -y
npm install webpack webpack-cli --save-dev

工程的目录结构如下：

  webpack-image
 |- package.json
 |- /dist
   |- index.html
 |- /src
   |- index.js
 |-webpack.config.js

其中package.json文件内如如下：

{
  "name": "webpack-image",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}

dist/index.html的文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack Image图片资源</title>
    <script src="bundle.js"></script>
</head>
<body>
    
</body>
</html>

webpack.config.js的文件内容如下：

const path=require('path')

module.exports={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    }
}

加载及配置图片资源

示例采用Webpack的官方logo作为图片资源引入，图片如下

示例图片

示例在index.js中动态创建一个图片页面元素，并添加为body的子元素，同时也创建一个样式文件style.css在src的目录下，编写一个把上面的图片作为背景图片的样式。

由于引入了样式资源需要安装对应样式的loader：

npm install style-loader css-loader --save-dev

把webpack.jpg放到工程的src目录下，工程结果如下：

  webpack-image
 |- package.json
 |- /dist
   |- index.html
 |- /src
   |- index.js
   |- style.css
   |- webpack.jpg
 |-webpack.config.js

修改dist/index.html的内容，添加对样式的引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack Image图片资源</title>
    <script src="bundle.js"></script>
</head>
<body>
    <div class="webpack_logo">欢迎来到Webpack官网</div>
</body>
</html>

编写样式文件style.css的文件内容：

.webpack_logo {
    background-image: url('./webpack.jpg');
    height: 400px;
    width: 400px;
}

在index.js，引入样式文件，并动态创建一个image页面元素，并添加到body。

import './style.css'
import webpack from './webpack.jpg'


window.onload = function(){
     // 创建Image对象
  const webpackLogo = new Image();
  // 设置引用图片资源
  webpackLogo.src = webpack;
  // 添加到body
  document.body.appendChild(webpackLogo)
}

修改webpack.config.js的内容，配置对应样式，图片资源的loader内容。

const path=require('path')

module.exports={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpg|png|gif)$/i,
                type: "asset/resource"
            }
        ]
    }
}

然后执行npm run build进行项目的构建。

npm run build

> [email protected] build D:\work\webpack5\webpack-image
> webpack

asset 92dfb2ab18da7819808e.jpg 29.5 KiB [emitted] [immutable] [from: src/webpack.jpg] (auxiliary name: main)
asset bundle.js 4.6 KiB [emitted] [minimized] (name: main)
runtime modules 1.71 KiB 5 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 10.4 KiB (javascript) 29.5 KiB (asset)
  modules by path ./src/ 1.31 KiB (javascript) 29.5 KiB (asset)
    ./src/index.js + 1 modules 605 bytes [built] [code generated]
    ./src/webpack.jpg 42 bytes (javascript) 29.5 KiB (asset) [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 696 bytes [built] [code generated]
  modules by path ./node_modules/ 9.04 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 1019 ms

然后打开dist目录下的index.html文件。

dist的目录内容

从目录中可以看到，对图片的引用名字变为了92dfb2ab18da7819808e.jpg。意味着webpack对引入的文件进行了处理。

index.html的效果

玖叶教程网

前端编程开发入门

webpack5资源管理二之加载images图片使用详解

初始化示例工程

加载及配置图片资源