突然尝试运行 webpack-dev-server 时出错，“fs”的未知属性

编程问答 2022-06-01

问题描述

问题已解决：我不知道这是如何以及为什么发生的，但问题出在我的 script.js 中。我不知道这段代码是从哪里来的，因为不是我写的，但是突然出现在那里，让我头疼：

import { ContextExclusionPlugin } from "webpack";

尝试运行 Webpack Dev Server 时，我收到一条很长的错误消息：47 个错误和 10 个警告。我以前没有错误，然后突然间我确实出错了。我的 webpack 配置没有任何改变。
大多数错误消息是关于：


    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.

以及它是如何Failed to compile.
它在终端内为我提供的解决方案是关于 polyfills，就像这个：


    If you want to include a polyfill,you need to:
            - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
            - install 'crypto-browserify'
    If you don't want to include a polyfill,you can use an empty module like this:
            resolve.fallback: { "crypto": false }

对于许多其他包也是如此。我安装了所有这些并将它们添加到我的 webpack 配置文件中。


    resolve: {
      fallback: {
        util: require.resolve("util/"),path: require.resolve("path-browserify"),crypto: require.resolve("crypto-browserify"),buffer: require.resolve("buffer/"),https: require.resolve("https-browserify"),http: require.resolve("stream-http"),os: require.resolve("os-browserify/browser"),vm: require.resolve("vm-browserify"),stream: require.resolve("stream-browserify"),constants: require.resolve("constants-browserify"),assert: require.resolve("assert/"),},

仍然无法编译，我现在有 9 个错误和 10 个警告。所有错误都与 fs 相关。


    ERROR in ./node_modules/watchpack/lib/watchEventSource.js 7:11-24
    Module not found: Error: Can't resolve 'fs' in 'D:\My\Path\To\My\Project\node_modules\watchpack\lib'

但是对于另外两个错误，大约有 worker_threads 和 child_process。

我尝试在网上查找解决方案，发现可以添加


    node: { fs: false },

但这没有用。如果我注释掉以前安装的 resolve.fallback 包，我会收到相同的错误消息：


    [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
     - configuration.node has an unkNown property 'fs'. These properties are valid:
       object { __dirname?,__filename?,global? }
       -> Options object for node compatibility features.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! wp_book_theme@1.0.0 start: `webpack serve --config webpack.dev.js --open`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the wp_book_theme@1.0.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

现在它甚至不能尝试编译。
我不知所措，不知道从这里开始该怎么做。我在网上找到的大多数解决方案都是关于 node: { fs: false }，这对我不起作用。
我很感激在这个问题上的一些帮助。

这也是我完整的 Webpack 配置文件：
webpack.common.js


    const path = require("path");
    
    module.exports = {
      entry: "./dev/script.js",module: {
        rules: [
          {
            test: /\.html$/i,use: ["html-loader"],{
            test: /\.(svg|png|jpg)$/i,use: {
              loader: "file-loader",options: {
                esModule: false,name: "[name].[hash].[ext]",outputPath: "assets/images",],};

webpack.dev.js


    const path = require("path");
    const common = require("./webpack.common.js");
    const { merge } = require("webpack-merge");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    module.exports = merge(common,{
      mode: "development",plugins: [
        new HtmlWebpackPlugin({
          template: "./dev/post.html",}),module: {
        rules: [
          {
            test: /\.scss$/i,use: ["style-loader","css-loader","sass-loader"],node: {
          fs: false
      },devServer: {
        inline: false,contentBase: "./dist",resolve: {
        fallback: {
              // fs: false,// util: require.resolve("util/"),// path: require.resolve("path-browserify"),// crypto: require.resolve("crypto-browserify"),// buffer: require.resolve("buffer/"),// https: require.resolve("https-browserify"),// http: require.resolve("stream-http"),// os: require.resolve("os-browserify/browser"),// vm: require.resolve("vm-browserify"),// stream: require.resolve("stream-browserify"),// constants: require.resolve("constants-browserify"),// assert: require.resolve("assert/"),output: {
        filename: "script.dev.js",path: path.resolve(__dirname,"dist"),publicPath: "./",});

这是这次运行的完整日志：

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.6
3 info using node@v12.18.3
4 verbose run-script [ 'prestart','start','poststart' ]
5 info lifecycle wp_book_theme@1.0.0~prestart: wp_book_theme@1.0.0
6 info lifecycle wp_book_theme@1.0.0~start: wp_book_theme@1.0.0
7 verbose lifecycle wp_book_theme@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle wp_book_theme@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\Art Files\Design\Eigene Projekte\WP Book Theme Dev\node_modules\.bin;C:\python38\Scripts\;C:\python38\;C:\Program Files (x86)\Common Files\Intel\Shared Libraries\redist\intel64\compiler;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\NVIDIA Corporation\physx\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;D:\PHP;C:\ProgramData\ComposerSetup\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Users\Wiktoria\AppData\Local\Microsoft\WindowsApps;D:\Programme\node-v12.18.0-win-x64;C:\Users\Wiktoria\AppData\Roaming\npm;C:\Users\Wiktoria\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Wiktoria\AppData\Roaming\Composer\vendor\bin;C:\Users\Wiktoria\AppData\Local\Microsoft\WindowsApps;
9 verbose lifecycle wp_book_theme@1.0.0~start: CWD: D:\Art Files\Design\Eigene Projekte\WP Book Theme Dev
10 silly lifecycle wp_book_theme@1.0.0~start: Args: [ '/d /s /c','webpack serve --config webpack.dev.js --open' ]
11 silly lifecycle wp_book_theme@1.0.0~start: Returned: code: 2  signal: null
12 info lifecycle wp_book_theme@1.0.0~start: Failed to exec start script
13 verbose stack Error: wp_book_theme@1.0.0 start: `webpack serve --config webpack.dev.js --open`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid wp_book_theme@1.0.0
15 verbose cwd D:\Art Files\Design\Eigene Projekte\WP Book Theme Dev
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.18.3
19 verbose npm  v6.14.6
20 error code ELIFECYCLE
21 error errno 2
22 error wp_book_theme@1.0.0 start: `webpack serve --config webpack.dev.js --open`
22 error Exit status 2
23 error Failed at the wp_book_theme@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2,true ]

解决方法

问题出在我的 script.js 上。我不知道这段代码是从哪里来的，因为不是我写的，但是突然出现在那里，让我头疼：

import { ContextExclusionPlugin } from "webpack";
webpackwebpackwebpackwebpack-dev-server