为什么 writeToDisk 选项会使我的开发构建挂起？

Question

默认情况下 webpack-dev-server 不会写入磁盘。我们必须通过一个选项来启用它。 当我通过writeToDisk: true 时，构建挂起。如果没有此选项，一切正常。但我想写入磁盘。

这是我的配置文件

webpack.dev.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'hello-world': './src/hello-world.js',
        'kiwi': './src/kiwi.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: ''
    },
    mode: 'development',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        index: 'index.html',
        port: 9000,
        hot: true,
        writeToDisk: true      //-------------- if i remove this line, everything works fine
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader', 'css-loader', 'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ '@babel/preset-env' ],
                        plugins: [ '@babel/plugin-proposal-class-properties' ]
                    }
                }
            },
            {
                test: /\.hbs$/,
                use: [
                    'handlebars-loader'
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                '**/*',
                path.join(process.cwd(), 'build/**/*')
            ]
        }),
        new HtmlWebpackPlugin({
            filename: 'hello-world.html',
            chunks: ['hello-world'],
            title: 'Bye World',
            template: 'src/page-template.hbs',
            description: 'some description'
        }),
        new HtmlWebpackPlugin({
            filename: 'kiwi.html',
            chunks: ['kiwi'],
            title: 'Kiwi',
            description: 'Kiwi',
            template: 'src/page-template.hbs'
        })
    ]
}

这里是构建挂起的地方

ankur.marwaha@Ankurs-MacBook-Pro webpack 4 by Viktor % npm run dev

> first@1.0.0 dev /Users/ankur.marwaha/Coding/webpack 4 by Viktor
> webpack-dev-server --config webpack.dev.config.js --hot

ℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/ankur.marwaha/Coding/webpack 4 by Viktor/dist
✖ ｢wdm｣: TypeError: Cannot read property 'tapAsync' of undefined
at /Users/ankur.marwaha/Coding/webpack 4 by Viktor/node_modules/webpack-dev-middleware/lib/fs.js:22:37
    at _next2 (eval at create (/Users/ankur.marwaha/Coding/webpack 4 by Viktor/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at eval (eval at create (/Users/ankur.marwaha/Coding/webpack 4 by Viktor/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at /Users/ankur.marwaha/Coding/webpack 4 by Viktor/node_modules/html-webpack-plugin/index.js:224:11
    at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)

Answer 1

// has error
"webpack": "4.39.2",
"webpack-cli": "3.3.4",
"webpack-dev-server": "3.7.2"

// start success
"webpack": "4.39.2",
"webpack-cli": "3.3.4",
"webpack-dev-server": "3.7.2"

尝试降级webpack-cli版本