webpack5的资源处理（asset modules）

asset-modules

webpack5 之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。

webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。

asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。

使用方法：

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'
			},
			{
				test: /\.html/,
				type: 'asset/resource',
				generator: {
					filename: 'static/[hash][ext][query]'  // 单独指定 名字
				}
			},
			{
				test: /\.svg/,
				type: 'asset/inline'  // inline 的时候不需要指定文件名
			},
			{
				test: /\.txt/,
				type: 'asset',
				parser: {
					dataUrlCondition: {
						maxSize: 4 * 1024 // 4kb  指定大小
					}
				}
			}
		]
	},
};

webpack5 报错。

使用webpack和babel编译代码，支持IE11的时候报错，


或者是

Uncaught TypeError: wrappedWellKnownSymbolModule.f is not a function
    at __webpack_modules__../node_modules/core-js/internals/define-well-known-symbol.js.module.exports (main.js:747)
    at Object../node_modules/core-js/modules/es.symbol.iterator.js (main.js:4675)
    at __webpack_require__ (main.js:5227)
    at Object../node_modules/core-js/internals/is-object.js (main.js:1697)
    at __webpack_require__ (main.js:5227)
    at Object../node_modules/core-js/internals/document-create-element.js (main.js:788)
    at __webpack_require__ (main.js:5227)
    at Object../node_modules/core-js/internals/ie8-dom-define.js (main.js:1439)
    at __webpack_require__ (main.js:5227)
    at Object../node_modules/core-js/internals/object-define-property.js (main.js:2047)

或者是

main.js:3271 Uncaught TypeError: $ is not a function
    at Object../node_modules/core-js/modules/es.array.index-of.js (main.js:3271)
    at __webpack_require__ (main.js:5099)
    at Object../node_modules/core-js/modules/es.regexp.constructor.js (main.js:3845)
    at __webpack_require__ (main.js:5099)
    at Object../node_modules/core-js/internals/regexp-exec.js (main.js:2492)
    at __webpack_require__ (main.js:5099)
    at Object../node_modules/core-js/modules/es.regexp.exec.js (main.js:3972)
    at __webpack_require__ (main.js:5099)
    at Object../node_modules/core-js/internals/indexed-object.js (main.js:1412)
    at __webpack_require__ (main.js:5099)

或者

export 'default' (imported as '___CSS_LOADER_API_IMPORT___') was not found in '../node_modules/css-loader/dist/runtime/api.js' 
(module has no exports)
 @ ./src/index.scss 2:12-128 9:17-24 13:15-29
 @ ./src/index.js 4:0-22

以上几种种错误的原因就是，在babel转译的时候没有core-js排除，babel吧core-js也给转译了一遍出现了错误，core-js不需要babel的再次转译。

检查一下webpack的babel-loader的配置，看看有没有吧core-js给排除掉。

	module: {
		rules: [
			{
				test: /\.m?js$/,
				// 之前是因为这里的正则表达式写错了。
				// exclude: /(node_modules[\\/][^dtc]|bower_components)/,
				exclude: [{
					and: [/node_modules[\\/]/], //排除node_modules文件夹下面的所有文件
					not: [
						// 但是不排除下面的文件，因为他们使用了IE11不支持的语法。
						/debug[\\/]/,
					]
				}],
				use: {
					loader: 'babel-loader',
					options: {
						cacheDirectory: true,
					},
				}
			},

webpack5热更新失效

webpack5通过target告知 webpack 目标(target)环境。默认值为 “browserslist”，如果没有找到 browserslist 的配置，则默认为 “web”，所以删除browerslist 相关配置的时候，热更新也会恢复。

这部分应该是webpack 什么的有bug 相关issue
暂时可以这么写

// webpack.config.js
  target: process.env.NODE_ENV === "development" ? "web" : "browserslist",