Webpack基础应用篇 - [7] 资源模块

1.5 资源模块

目前为止，我们的项目可以在控制台上显示 “Hello world~~~”。现在我们尝试混合一些其他资源，比如 images，看看 webpack 如何处理。

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。webpack 最出色的功能之一就是，除了引入 JavaScript，还可以内置的资源模块 Asset Modules 引入任何其他类型的文件。

资源模块(asset module)是一种模块类型，它允许我们应用Webpack来打包其他资源文件（如字体，图标等）

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。
• asset/inline 导出一个资源的 data URI。
• asset/source 导出资源的源代码。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。

1.5.1 Resource 资源

修改 webpack.config.js配置：

// 配置资源文件
  module: {
   
    rules: [{
   
      test: /\.png/,
      type: 'asset/resource'
    }]
  },

06-asset-modules/webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    
//...

// 配置资源文件
 module: {
    
   rules: [{
    
     test: /\.png/,
     type: 'asset/resource'
   }]
 },
	 //...
}

准备资源文件，在入口文件中引入，并显示在页面上：

06-asset-modules/src/index.js

// 导入函数模块
import helloWorld from './hello-world.js'
import imgsrc from './assets/img-1.png'

helloWorld()

const img = document.createElement('img')
img.src = imgsrc
document.body.appendChild(img)

执行打包命令：

[felix] 06-asset-modules $ npx webpack
asset 8ec2798f81f4745a7c9b.png 101 KiB [emitted] [immutable] [from: src/assets/img-1.png] (auxiliary name: main)
asset bundle.js 10.5 KiB [emitted] (name: main)
asset app.html 326 bytes [emitted]
runtime modules 1.72 KiB 5 modules
cacheable modules 388 bytes (javascript) 101 KiB (asset)
  ./src/index.js 208 bytes [built] [code generated]
  ./src/hello-world.js 138 bytes [built] [code generated]
  ./src/assets/img-1.png 42 bytes (javascript) 101 KiB (asset) [built] [code generated]
webpack 5.54.0 compiled successfully in 114 ms

发现图片(.png)文件已经打包到了dis目录下：

执行启动服务命令：

打开浏览器：

• 自定义输出文件名

  默认情况下，asset/resource 模块以 [contenthash][ext][query] 文件名发送到输出目录。

  可以通过在 webpack 配置中设置 output.assetModuleFilename<