Webpack-TypeError：$不是函数

Question

我是webpack的新手，我正在使用webpack创建一个react应用程序。我在编译TypeError: $ is not a function时遇到此错误。

我没有使用jquery，但是我的节点模块包括一些第三方库。

我只能找到一篇与此问题相关的文章，但它与jquery有关。Webpack - $ is not a function

我的webpack和babel配置是否有问题：

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env) => {
	console.log("WEBPACK ENV: ", env);

	const isDevMode = env !== "production";

	let config = {
		entry: ["./src/index.js"],
		output: {
			path: path.resolve(__dirname, "dist"),
			filename: "[name].[contenthash].js"
		},
		resolve: {
			extensions: [".js", ".jsx"]
		},
		plugins: [
			new CleanWebpackPlugin(),
			new FaviconsWebpackPlugin("./src/logo.png"),
			new HtmlWebpackPlugin({
				template: "./src/index.html",
				minify: {
					collapseInlineTagWhitespace: true,
					collapseWhitespace: true,
					removeComments: true,
					removeRedundantAttributes: true
				}
			}),
			new MiniCssExtractPlugin({
				filename: "[name].[contenthash].css"
			})
		],
		module: {
			rules: [
				{
					test: /\.scss$/,
					use: ["css-loader", "sass-loader"]
				},
				{
					test: /\.jsx?$/,
					exclude: /node_modules\/(?!(sdk1|sdk2)\/).*/,
					use: ["babel-loader"]
				},
				{
					test: /\.(ac3|gif|jpe?g|m4a|mp3|ogg|png|svg|otf)$/,
					loader: "file-loader",
					options: {
						outputPath: "./assets"
					}
				}
			]
		},
		optimization: {
			minimize: true,
			minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
			splitChunks: {
				cacheGroups: {
					vendors: {
						test: /[\\/]node_modules[\\/]/,
						name: "vendors",
						chunks: "all"
					}
				}
			}
		}
	};

	// Mode
	config.mode = isDevMode ? "development" : "production";

	// Dev Tools
	config.devtool = isDevMode ? "inline-source-map" : false;

	// Plugins
	if (!isDevMode) {
		config.plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 8181 }));
	}

	// Dev Server
	if (isDevMode) {
		config.devServer = {};
		config.devServer.disableHostCheck = true;
	}

	return config;
};

babel.config.js

module.exports = {
	plugins: [
		"@babel/plugin-syntax-dynamic-import",
		"@babel/plugin-transform-object-assign",
		[
			require.resolve("babel-plugin-module-resolver"),
			{
				root: ["./src/"],
				alias: {
					js: "./src/js",
					scss: "./src/scss",
					components: "./src/js/components",
					containers: "./src/js/containers",
					phaser_path: "./src/js/phaser",
					services: "./src/js/services",
					constants: "./src/js/constants"
				}
			}
		]
	],
	presets: [
		[
			"@babel/preset-env",
			{
				useBuiltIns: "usage",
				corejs: 3,
				modules: false,
				debug: true,
				targets: {
					browsers: [">0.25%", "ie >= 11"]
				}
			}
		],
		[
			"@babel/preset-react",
			{
				development: true
			}
		]
	]
};

我认为它与html-webpack-plugin有关，但我不确定。任何帮助表示赞赏。

谢谢

Answer 1

由于useBuiltIns属性不适用于我，因此我目前正在将此方法作为polyfill的替代方法。

已安装以下软件包：babel-polyfill，es6-promise，whatwg-fetch

npm i babel-polyfill

npm i --save-dev es6-promise whatwg-fetch

在webpack.config.js中进行了这些更改

1. 在顶部require("es6-promise").polyfill();上要求es6-promise
2. 将whatwg-fetch和babel-polyfill添加到配置中的entry属性中，如下所示entry: ["whatwg-fetch", "babel-polyfill", "./src/index.js"]