Webpack-4环境下webpack-dev-server资源无法获取及构建异常求助

Hey there, let's work through this webpack-dev-server problem you're hitting! It sounds like your dev server isn't serving assets from memory like it should, and instead is clinging to the static files in your /build directory (or panicking when they're gone). Here's what's likely going wrong and how to fix it:

1. Correct Your output Configuration #

webpack-dev-server serves files from memory by default, but it needs clear direction on where those "virtual" files live. Make sure your output block uses an absolute path for path and sets publicPath to the root (/):

const path = require('path');

module.exports = {
  // ...other configs
  output: {
    path: path.resolve(__dirname, 'build'), // Absolute path to your intended build directory
    filename: '[name].bundle.js', // Or your preferred filename pattern
    publicPath: '/' // Critical: tells dev-server to serve assets from the root
  },
  // ...
};

The publicPath: '/' ensures the server looks for your bundled JS and generated HTML at the root, not in a subdirectory.

2. Remove or Fix devServer.contentBase (Webpack 4 Specific) #

If you've set contentBase: './build' in your devServer config, that's the culprit! This tells webpack-dev-server to prioritize serving static files from your /build directory on disk instead of the in-memory bundles.

• Either remove the contentBase line entirely (dev-server will default to serving in-memory files)
• Or set it to a directory for your static assets (e.g., contentBase: './src/assets') if you need to serve unbundled files like images or fonts.

3. Adjust HtmlWebpackPlugin's filename #

Your current filename: "./index.html" adds a relative path prefix, which might cause the generated HTML to live in a nested "virtual" directory instead of the root. Update it to:

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "index.html" // No leading ./ – places the file at the root of in-memory assets
});

This ensures dev-server can find the generated HTML file immediately when you hit the root URL.

4. Verify Your Dev Server Startup Command #

Double-check your package.json scripts to make sure you're running the dev server, not a full build:

"scripts": {
  "start": "webpack-dev-server --mode development --open"
}

Running webpack (without -dev-server) will build files to the /build directory on disk, which dev-server won't update – stick to the dev-server command for development.

Quick Recap #

After these changes:

• webpack-dev-server will serve all bundles from memory – your /build directory on disk won't be updated (this is normal behavior for dev-server!)
• You can safely delete the /build directory entirely; dev-server doesn't need it anymore
• Visiting your dev server URL will load the generated index.html directly, not a directory listing

内容的提问来源于stack exchange，提问作者Sahin Erbay