Webpack 开发服务器重新加载但不显示标记或 CSS 更改？

Question

所以我对 Webpack 还是很陌生，我终于让 webpack-dev-server 运行起来了。它在保存时重新编译并刷新页面，并显示对我的 JS 代码的更改。但它似乎不适用于我的 SASS 或 HTML 文件？

在重新开始时，如果我做出更改，它会显示更改，但如果我撤消该更改，它不会更新。环顾其他帖子，我尝试添加“--hot”标志，并在 webpack 配置中将“内联”添加到我的 devServer。这使它适用于样式更改，但不会显示已删除或撤消的更改。

这是我的 package.json...

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "watch": "webpack --watch",
    "server": "webpack-dev-server --open --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "file-loader": "^5.0.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.3"
  }
}

这是我的 webpack.config...

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
const webpack = require('webpack');

module.exports = {
  entry: './src/javascript/index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    }),

    new HtmlWebPackPlugin({
      template: './dist/index.html',
      filename: 'index.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    inline: true,
    hot: true
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass')
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts'
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: !isDevelopment }
          }
        ]
      }
    ]
  },
  // Default mode is Production. Uses minifying
  mode: 'development'
};

我一定有什么不对劲或不合适的地方吗？

任何帮助或提示将不胜感激。如果需要，将提供更多信息。 提前致谢！

Answer 1

我通过将“watchContentBase”添加到我的 devServer 找到了解决方案。

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    **watchContentBase: true,**
    inline: true,
    hot: true
  }