Webpack和webpack dev服务器不提供静态文件

Posted 2021-05-06

在过去，我已经能够在开发过程中提供静态文件，但现在我似乎无法再这样做了，考虑到qpackxswpoi和4.6.0的webpack和webpack-dev-server的最新版本。

如果我检查我的chrome检查器（Ctrl + Shift + I） - > 3.1.3选项卡并查看Sources选项卡和Network，我只能看到两个条目：

• （指数）
• bundle.js

我应该在那里看到我想要服务的图像文件，但我没有。当我在控制台中看到类似这样的东西时，它真的很令人沮丧：

localhost:8080

但实际上，实际上并没有提供任何服务。感觉相当背叛。

无论如何，这些是我的文件：

文件夹结构

• 资产
• node_modules
• SRC
• 的package.json
• 包lock.json
• webpack.config.js

webpack.config.js

Content not from webpack is served from C:UsersPC-userWebstormProjectsuntitled/assets/

答案

也遇到了麻烦。但这有帮助。

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'
  },
};

为我工作。 public是我的静态文件所在的位置。