问题描述
我的 webpack-dev-server 通常正常工作,实时更新工作正常,一切都很好.
My webpack-dev-server normally works as it should, live updates are working, everything's great.
但是,如果我保存了一个语法错误的文件,服务器会停止编译并要求我重新启动它以使其再次工作.
However, if I ever save a file with a syntax error, the server stops compiling and requires me to restart it to get it working again.
例如,假设我不小心在 .scss 文件中添加了一个额外的逗号,webpack-dev-server 会输出错误:
For example, say I accidentally add an extra comma to a .scss file, the webpack-dev-server outputs the error:
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 并重新启动它.
But when I fix the error by removing the comma and save the file, the server doesn't recompile like it normally does (it doesn't seem to output anything at all). I have to kill the webpack-dev-server and restart it.
我在网上找到的最接近我的问题的是这个 https://github.com/webpack/webpack-dev-server/issues/463,但那里的解决方案没有解决我的问题.
The closest thing I've found online to my issue was this https://github.com/webpack/webpack-dev-server/issues/463, but the solutions there didn't fix my issue.
这是我的 webpack.config.js:
Here is my 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']
}
]
}
};
服务器在出错后停止编译是正常行为吗?或者有没有我可以更改的标志,这样我就不必在每次语法错误后重新启动服务器?
Is it normal behavior for the server to stop compiling after an error? Or is there a flag I can change so I don't have to restart the server after every syntax error?
推荐答案
我不确定这是否与您的 webpack 配置相关,但我遇到了同样的问题,直到我删除了 prettier
和prettier-webpack-plugin
插件.我注意到我的日志中发生了崩溃:
I'm not sure if this is relevant to your webpack config, but I had the same issue until I removed the prettier
and prettier-webpack-plugin
plugin. I noticed that was where the crash was happening in my logs:
✖ 「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: /```
这篇关于webpack-dev-server 在语法错误后停止编译,需要重启的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!