关于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