时间戳

首页 > 解决方案 > Webpack 开发服务器在模块路径错误后停止服务资产

webpack - Webpack 开发服务器在模块路径错误后停止服务资产

问题描述

有带有 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。

问题通过后续步骤重现：

  1. 在终端中运行npx webpack serve。结果：Compiled successfully。someimg.jpg显示在页面上，并在 Chrome DevTools 中作为源可见（带有散列的 hame）。
  2. 在./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.
  1. 改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一切正常。我错过了一些配置吗？开发服务器可以在不重新启动的情况下处理这种情况吗？

标签： webpackwebpack-dev-server

解决方案

我解决了这个问题

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

在webpack.config.js.

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

推荐阅读