webpack-dev-server 未加载 html 文件答案

【问题标题】：webpack-dev-server not loading html filewebpack-dev-server 未加载 html 文件
【发布时间】：2020-11-19 17:08:19
【问题描述】：

当我对 HTML 和 css 文件进行更改时，我正在尝试使用 webpack 开发服务器自动刷新浏览器。但是，当我打开 localhost:3000 网站时，我遇到了如下所示的奇怪问题。

我可以单击home-page.html 文件，它会加载该文件，但是当我对 HTML 文件或 css 文件进行更改时，什么也没有发生。事实上，曾经应用于 home-page.html 文件的 css 不再被应用。

我应该提到，当我将 home-page.html 文件拖到浏览器时，所有内容都会正确加载，包括 css。

我以前没有遇到过这个问题。我以后会有多个 HTML 文件，它们都将位于views 目录中。

所有 css 文件都将位于 public 目录中。

下面是我的工作目录的图片：

webpack.config.js：

const path = require('path')
const postCSSPlugins = [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('autoprefixer')
]

module.exports = {
    entry: './public/scripts/App.js',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'public')
    },
    devServer: {
        before: function(app, server) {
            server._watch('./views/**/*.html')
        },
        contentBase: path.join(__dirname, './views'),
        hot: true,
        port: 3000
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader?url=false', {loader: 'postcss-loader', options: {plugins: postCSSPlugins}}]
            }
        ]
    }
}

package.json：

"scripts": {
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

不确定是什么问题。我想知道是否有人能指出我正确的方向。

【问题讨论】：

标签： javascript html css node.js webpack

【解决方案1】：

我想通了。它没有生成 HTML 的原因是该文件需要命名为 index.html。

【讨论】：