导入webpack或htmlWebpackPlugin后构建webpack的几个错误

编程问答 2022-12-26

问题描述

我一直在用头撞墙这么久。

我一直在为某些东西构建一个 webpack，在我需要导入任何类型的插件之前，一切看起来都很棒。每当我导入时：

const webpack = require('webpack') 或等效的 ts import webpack from 'webpack，我遇到了大量与“无法解析 X 中的 node_modules/.../..”相关的错误，这些错误与我。我也经常收到警告，例如 Critical dependency: the request of a dependency is an expression。

在网上搜索，似乎是我的其他错误之一：

try {
|   module.exports = require("chokidar");
>   return;
| } catch(e) {
|   v3Err = e;

通过删除不需要的导入来解决（在我的情况下，有问题的导入是 HtmlWebpackPlugin 我猜），但这是我确实想要的插件，以便生成/指向 index.html 文件。关于为什么我的 webpack 如此完全无聊的任何想法？

这是我的 webpack：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  mode: 'development',entry: './src/index.tsx',module: {
    rules: [
      {
        test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},],resolve: {
    extensions: ['.tsx','.ts','.js'],output: {
    path: path.resolve(__dirname,'dist'),filename: 'root.js',devServer: {
    port: 8080,contentBase: 'dist/',// NOTE: commenting out `plugins` and `HtmlWebpackPlugin` import resolves all build problems.
  plugins: [
    new HtmlWebpackPlugin(),]
};

module.exports = config;

package.json

{
  "name": "joshua_project","version": "0.0.0","private": true,"scripts": {
    "start": "yarn clear-build && webpack-dev-server ./webpack.config.js","clear-build": "rimraf ./dist"
  },"dependencies": {
    "lodash": "4.17.0","path": "0.12.7","html-webpack-plugin": "3.2.0","react": "17.0.2","react-dom": "17.0.2","ts-loader": "5.3.3","ts-node": "10.1.0","typescript": "4.3.5","util": "0.12.4","webpack": "4.28.0","webpack-cli": "3.2.1","webpack-dev-server": "3.1.14"
  },// Note: I've also tried the corresponding types for webpack and html-website-plugin,back when my website.config was a ts file instead of js. didn't work either.
  "devDependencies": {
    "@types/node": "16.3.1","@types/react": "17.0.14","@types/react-dom": "17.0.9"
  }
}

ts-config

{
  "compilerOptions": {
    "baseUrl": "./","target": "ES2019","lib": ["es2019","ES2020.bigint","ES2020.string","ES2020.symbol.wellkNown"],"pretty": true,"module": "commonjs","sourceMap": true,"jsx": "react-jsx","outDir": "./dist/","noImplicitAny": false,"moduleResolution": "node","strict": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"paths": {
      "*": ["node_modules/@types/*"]
    }
  },"include": [
    "src/**/*"
  ],"exclude": [
    "node_modules"
  ]
}

一些错误信息（还有更多类似的错误信息）

ERROR in (webpack)/lib/node/NodeOutputFileSystem.js
Module not found: Error: Can't resolve 'fs' in '/home/johnli/Documents/Projects/JoshuaProject/node_modules/webpack/lib/node'
 @ (webpack)/lib/node/NodeOutputFileSystem.js 7:11-24
 @ (webpack)/lib/node sync ^\.\/.*$
 @ (webpack)/lib/node/NodeMainTemplate.runtime.js
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ ./node_modules/html-webpack-plugin/lib/compiler.js
 @ ./node_modules/html-webpack-plugin/index.js
 @ ./webpack.config.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./webpack.config.js

ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in '/home/johnli/Documents/Projects/JoshuaProject/node_modules/webpack/lib/node'
 @ (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
 @ ./node_modules/html-webpack-plugin/lib/compiler.js
 @ ./node_modules/html-webpack-plugin/index.js
 @ ./webpack.config.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./webpack.config.js

ERROR in ./node_modules/watchpack/lib/chokidar.js 4:1
Module parse Failed: 'return' outside of function (4:1)
You may need an appropriate loader to handle this file type.
| try {
|   module.exports = require("chokidar");
>   return;
| } catch(e) {
|   v3Err = e;
 @ ./node_modules/watchpack/lib/DirectoryWatcher.js 9:15-36
 @ ./node_modules/watchpack/lib/watcherManager.js
 @ ./node_modules/watchpack/lib/watchpack.js
 @ (webpack)/lib/node/NodeWatchFileSystem.js
 @ (webpack)/lib/node sync ^\.\/.*$
 @ (webpack)/lib/node/NodeMainTemplate.runtime.js
 @ (webpack)/lib/node/NodeMainTemplatePlugin.js
 @ (webpack)/lib/node/NodeTemplatePlugin.js
 @ ./node_modules/html-webpack-plugin/lib/compiler.js
 @ ./node_modules/html-webpack-plugin/index.js
 @ ./webpack.config.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./webpack.config.js

节点版本：v14.17.0 在archlinux上。谢谢大家；关于我如何也可以解除对此的任何想法？在这一点上非常绝望。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

compiler-errorshtml-webpack-plugintypescripttypescripttypescriptwebpackwebpackwebpackwebpack-4