Сервер Webpack dev перезагружается, но не показывает разметку или CSS изменений? - PullRequest
Новая
       4

Сервер Webpack dev перезагружается, но не показывает разметку или CSS изменений?

0 голосов
/ 11 февраля 2020

Итак, я довольно новичок в Webpack, и я наконец запустил webpack-dev-server. Он перекомпилирует и обновляет страницу при сохранении и показывает изменения в моем JS коде. Но, похоже, он плохо работает с моими файлами SASS или HTML?

При запуске sh изменение будет отображаться, если я его сделаю, но если я отменю это изменение, оно не обновится. Просматривая другие посты, я попытался добавить флаг "--hot" и добавить "inline" в мой devServer в конфигурации webpack. Это работает для изменения стиля, но не показывает удаленные или отмененные изменения.

Это мой пакет. 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"
  }
}

Это мой веб-пакет. конфиг ... 

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

У меня должно быть что-то не так или не к месту?

Любая помощь или советы будут оценены. Предоставит дополнительную информацию при необходимости. Заранее спасибо!

1 Ответ

1 голос
/ 11 февраля 2020

Я нашел решение, добавив «watchContentBase» к моему devServer. 

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