Question

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

从新开始，如果我进行更改，它将显示更改，但是如果撤消该更改，则不会更新。环顾其他帖子，我尝试在Webpack配置中向我的devServer添加“ --hot”标志，并向其devServer添加“ inline”。这使它可以用于样式更改，但是不会显示已删除或撤消的更改。

这是我的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

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

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

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

1 个答案: