Webpack Web包和Web包开发服务器不提供静态文件

在过去的开发过程中，我能够提供静态文件，但现在我似乎不能再这样做了，因为有了

4.6.0

和

3.1.3

的webpack和webpack dev server的最新版本

如果我检查我的chrome inspector（Ctrl+Shift+I）->

Sources

选项卡并查看

Network

选项卡和

localhost:8080

，我只能看到两个条目：

• （索引）
• bundle.js

我应该在那里看到我试图提供的图像文件，但我没有。当我在控制台中看到这样的东西时，我真的很沮丧：

来自C:\Users\PC user\WebStormProject\untitled/assets/

但在现实中，没有什么是真正的服务。这感觉有点背叛

总之，这些是我的文件：

文件夹结构

• 资产
• 节点单元
• src
• package.json
• package-lock.json
• webpack.config.js

webpack.config.js

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

module.exports = {
  entry: {
    app: './src/index.js'
  },
  devServer: {
    // contentBase: './dist',
    contentBase: __dirname + "/assets/",
    hot: true,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    path: __dirname + "/assets/",
    filename: 'bundle.js',
    chunkFilename: '[name].js'
  },
};

---

我在这方面也遇到了麻烦。但这有所帮助

devServer: {
        publicPath : '/public'
    }

---

为我工作。公共的地方就是我的静态文件所在的地方

尝试更改开发服务器设置，如下所示

  const path = require('path');
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    open: true,
    port: 3000,
    historyApiFallback: true,
    hot: true,
    publicPath: '/',
  },

---

好的StackOverflow答案应该解释配置的实际功能，而不是简单地列出配置。