关于webpack定义的抽象模块类型s

关于webpack定义的抽象模块类型s可使用在 module.rule.test、splitChunks.cacheGroups.test 类型判断，速览：

javascript/autojavascript/esmjavascript/dynamicjsonwebassembly/experimentalv4webassembly/syncv5webassembly/asyncv5assetv5asset/sourcev5asset/resourcev5asset/inlinev5
{
    type: 'json',
    // Or
    test(module) {
        return module.type === 'javascript/esm';
    },
}

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

css/mini-extract 来源于 MiniCssExtractPlugin.loader
Webpack 中模块的概念
Webpack 是一个基于模块而进行打包的工具，有哪些东西被其视为模块呢？具体如下：

基于 ES6 import 引入的基于 CommonJS require() 引入的基于 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 代码
官方文档上举的其它模块例子还有：

基于 css/less/sass 里 @import 引入的基于 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 ConceptsSplitChunksPlugin | WebpackWebpack v4.0.0 changelog
刚刚
JavaScript全屏阅读