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

ux6nzvsh 于 2023-04-06 发布在 Webpack

关注(0)|答案(2)|浏览(167)

我的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']
            }
        ]
    }
};

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

webpack

来源：https://stackoverflow.com/questions/62395604/webpack-dev-server-stops-compiling-after-a-syntax-error-requires-restart

2条答案

按热度按时间

yacmzcpb1#

我不确定这是否与你的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: /```

赞(0）回复(0）举报 2023-04-06

0kjbasz62#

我遇到了同样的问题，只是通过更改“autoRestart：webpack-hmr.config.js中的“true”

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,
      }),
    ],
  };
};```

赞(0）回复(0）举报 2023-04-06

我来回答

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

2条答案

相关问题

热门标签

最新问答