突然尝试 运行 webpack-dev-server 时出错，未知 属性 of "fs"
Getting error when trying to run the webpack-dev-server all of a sudden, unknown property of "fs"
尝试 运行 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.
它在终端内为我提供的解决方案是关于 polyfill 的，比如这个：
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";
它可能是自动完成的，所以也要注意这一点。
尝试 运行 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.
它在终端内为我提供的解决方案是关于 polyfill 的，比如这个：
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";
它可能是自动完成的，所以也要注意这一点。