Webpack-dev-server 在出现语法错误后停止编译，需要重新启动

Question

我的 webpack-dev-server 正常工作，实时更新正在工作，一切都很棒。

但是，如果我保存了一个带有语法错误的文件，服务器将停止编译并要求我重新启动它以使其再次工作。

例如，假设我不小心在 .scss 文件中添加了一个额外的逗号，webpack-dev-server 输出错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after '...oto Condensed",': expected expression (e.g. 1px, bold), was ", sans-serif;"
on line 18 of /Users/r/Documents/sol/src/styles/app.scss
>>   font-family: "Roboto Condensed",, sans-serif;
----------------------------------^
@ ./src/styles/app.scss 2:26-181
@ ./src/index.jsx
ℹ ｢wdm｣: Failed to compile.

但是当我通过删除逗号并保存文件来修复错误时，服务器不会像往常那样重新编译(它似乎根本没有输出任何内容(。我必须杀死 webpack-dev-server 并重新启动它。

我在网上找到的最接近我的问题的是这个 https://github.com/webpack/webpack-dev-server/issues/463，但那里的解决方案并没有解决我的问题。

这是我的webpack.config.js：

const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.jsx'),
output: {
path: path.resolve(__dirname, 'output'),
filename: 'bundle.js'
},
devServer: {
publicPath: '/output/',
contentBase: path.resolve(__dirname, 'src'),
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /.jsx/,
use: {
loader: 'babel-loader',
options: { presets: ['@babel/preset-react', '@babel/preset-env'] }
}
},
{
test: /.scss/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}
]
}
};

服务器在出错后停止编译是正常行为吗？或者是否有我可以更改的标志，这样我就不必在每次语法错误后重新启动服务器？

Answer 1

我不确定这是否与您的 webpack 配置相关，但在我删除prettier和prettier-webpack-plugin插件之前，我遇到了同样的问题。我注意到这就是我的日志中发生崩溃的地方：

✖ ｢wdm｣: SyntaxError: Unexpected token (100:3)
98 | // cull whenever the viewport moves
99 | PIXI.Ticker.shared.add(() =>
> 100 |   if (viewport.dirty) {
|   ^
101 |     if (viewport.top < chunk.top) loadChunk('top');
102 |     if (viewport.left < chunk.left) loadChunk('left');
103 |
at t (./node_modules/prettier/parser-babel.js:1:379)
at Object.parse (./node_modules/prettier/parser-babel.js:1:346226)
at Object.parse (./node_modules/prettier/index.js:13625:19)
at coreFormat (./node_modules/prettier/index.js:14899:14)
at format (./node_modules/prettier/index.js:15131:14)
at ./node_modules/prettier/index.js:57542:12
at Object.format (./node_modules/prettier/index.js:57562:12)
at ./node_modules/prettier-webpack-plugin/index.js:70:47
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:69:3)
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: wait until bundle finished: /```

Answer 2

我遇到了同样的问题，只是通过在 webpack-hmr.config 中更改"自动重启：真"来修复它.js

const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
module.exports = function (options, webpack) {
return {
...options,
entry: ['webpack/hot/poll?100', options.entry],
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/.js$/, /.d.ts$/],
}),
new RunScriptWebpackPlugin({
name: options.output.filename,
autoRestart: true,
}),
],
};
};```