webpack5 资源处理上的小差异

前言

今天把整个博客都整理了一下主要是把 webpack3 升级到了 webpack5，可能是年纪大了，一些花里胡哨的东西都不太喜欢了。就把页面上以前一些花里胡哨的东西都移除了，留下了一个干干净净的，纯粹的文章页面。

在升级的过程中，发现了 webpack5 和 webpack3 & webpack4 比较大的一个差异点 —— 资源处理。

对比

webpack3/4

在 webpack3/4 中我们通常使用下面几个 loader 处理一些常见的资源：

• raw-loader 将文件导入为字符串
• url-loader 将文件作为 data URI 内联到 bundle 中
• file-loader 将文件发送到输出目录

webpack5

在 webpack5 中一个比较大的区别是，现在我们引入了 4 种新的模块类型来替换掉所有的这些 loader。

• asset/resource 发送一个单独的文件并导出 URL。等同于  file-loader 。
• asset/inline 导出一个资源的 data URI。等同于 url-loader 。
• asset/source 导出资源的源代码。等同于 raw-loader。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

当然你还是可以在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等），但是其结果可能和你想的不太一致，他会优先输出一个 js 来处理。

例子

webpack.config.js

const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

import mainImage from './images/main.png';
 
img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'
 

自定义输出文件名

webpack.config.js

const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

本文标题：webpack5 资源处理上的小差异

永久链接：https://iceprosurface.com/2022/wepack5-asset-diff/

作者授权：本文由 icepro 原创编译并授权刊载发布。

版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。

查看源码：