可使用在 module.rule.test、splitChunks.cacheGroups.test 类型判断，速览：

• javascript/auto
• javascript/esm
• javascript/dynamic
• json
• webassembly/experimentalv4
• webassembly/syncv5
• webassembly/asyncv5
• assetv5
• asset/sourcev5
• asset/resourcev5
• asset/inlinev5

{
    type: 'json',
    // Or
    test(module) {
        return module.type === 'javascript/esm';
    },
}

其它第三方类型（未完善）：

• css/mini-extract 来源于 MiniCssExtractPlugin.loader

Webpack 中模块的概念

Webpack 是一个基于模块而进行打包的工具，有哪些东西被其视为模块呢？具体如下：

1. 基于 ES6 import 引入的
2. 基于 CommonJS require() 引入的
3. 基于 AMD define/require 引入的

Webpack 原生只能识别 .js|.mjs|.json 的模块，其它未知文件类型模块则需要通过 loaders 进行转化后处理。比如：

• .css 样式模块通过的 css-loader 转化为可识别的 js 代码。简而言之就是导出文件内容，类似 export default "...css文件内容..."
• .ts TypeScript 模块通过 ts-loader 转化为 js 代码
• .jpg|png|gif 图片模块通过 file-loader 转化为 js 代码

官方文档上举的其它模块例子还有：

4. 基于 css/less/sass 里 @import 引入的
5. 基于 css 里 url() 引入的

这些模块其实是经过 css-loader 处理后才被 webpack 识别的。@import 引入的样式，会被加入到 webpack 依赖图中，然后重新经过 loaders 处理；同理 url() 引入的图片、字体文件也一样。

Webpack 5 新增的 Asset Modules

从 v5 开始，webpack 开始原生支持一些资源文件模块，比如图片、字体、图标 svg 等。

module.exports = {
    output: {
+       assetModuleFilename: 'images/[name][ext]', // v5
    },
    module: {
        rules: [{
            test: /\.png/,
            // v4
-           use: {
-               loader: 'file-loader',
-               options: {
-                   outputPath: 'images/',
-                   name: '[name].[ext]',
-               },
-           },
            // v5
+           type: 'asset/resource',
+           generator: {
+               filename: 'static/[name][ext]',
+           },
        }]
    },
};

Webpack loaders 处理结果简览

import 'css-loader!./src/index.css';
// ".className {\ndisplay: block\n}"
import { className } from 'css-loader?modules=true!./src/index.css';
// ""

import imgPhoto from 'file-loader!./src/assets/photo.jpg';
// "/dist/151cfcfa1bd74779aadb.jpg"
import urlPhoto from 'url-loader!./src/assets/photo.jpg';
// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALD..."
import rawText from 'raw-loader!./some.txt';
// "Hello World!"

Webpack 定义的抽象模块类型s

听起来高大上，其实就是 webpack 内部定义的一些常量字符串。

type	描述
javascript/auto	默认。包括 esm/cjs/amd 写法的文件模块
javascript/esm	以 .mjs 结尾的文件模块
javascript/dynamic	不确定性的 js 模块，比如 externals 里配置的
json	.json 文件模块
webassembly/*	实验性
asset	资源文件模块。对应 url-loader 里的 size limit
asset/source	同上。对应 raw-loader
asset/inline	同上。对应 url-loader
asset/resource	同上。对应 file-loader

PS: 没有必要去深究某些细节，该学习的是其模块化打包的流程以及插件生态的优点。＠techug

参考链接

• Modules | Webpack Concepts
• SplitChunksPlugin | Webpack
• Webpack v4.0.0 changelog

原文链接（博客小站引流）：ningtaostudy.cn/articles/bs…