Webpack 开发服务器在错误的模块路径后停止服务资产答案

【问题标题】：Webpack dev server stops serve asset after wrong module pathWebpack 开发服务器在错误的模块路径后停止服务资产
【发布时间】：2021-04-01 13:14:59
【问题描述】：

有带有 webpack 开发服务器的基本 webpack 项目。一切正常，直到使用错误的路径或名称更改某些模块导入。

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource'
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack playground'
        })
    ]
}

package.json 中的开发依赖项：

"html-webpack-plugin": "^5.3.1",
"webpack": "^5.28.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"

./src/main.js：

import SomeImg from './someimg.jpg';

const element = document.createElement('div');
const myIcon = new Image();
myIcon.src = SomeImg;
element.appendChild(myIcon);
document.body.appendChild(element);

src目录下有someimg.jpg。

问题通过后续步骤重现：

在终端npx webpack serve 中运行。结果：Compiled successfully。 someimg.jpg 显示在页面上，并在 Chrome DevTools 中作为源可见（带有哈希hame）。
在./src/main.js 中将import SomeImg from './someimg.jpg'; 更改为import SomeImg from './someimg-wrong-name.jpg';。终端中的明显结果：

***************
ERROR in ./src/main.js 1:0-47
Module not found: Error: Can't resolve './someimg-wrong-name.jpg' in '*******'
***************
Failed to compile.

将import SomeImg from './someimg-wrong-name.jpg'; 改回import SomeImg from './someimg.jpg';。结果在终端：Compiled successfully，但在 Chrome 控制台中我得到http://127.0.0.1:8080/3de22ea07be845d3db63.jpg 404 (Not Found)，图像不显示，并且 Chrome DevTools 源选项卡中没有 jpg 文件（只有 index 和 main.bundle.js）。

重启npx webpack serve 后一切正常。我错过了一些配置吗？开发服务器可以在不重启的情况下处理这种情况吗？

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

我解决了这个问题

module.exports = {
    ****************
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        writeToDisk: true
    },
    *****************
}

在webpack.config.js.

看起来是一个可以接受的解决方案，但有没有办法在不写入磁盘的情况下将资产保存在内存中？

【讨论】：