Как отследить изменения в html с помощью веб-пакета?

Question

Есть сборка из babel, css-loader & style-loader + extract-text-webpack-plugin.Плюс это начальная загрузка и jquery.

Изменения в jquery подсчитываются и изменяются так же реактивно, как при синхронизации с браузером на gulp'e, но изменения в html-сети не отслеживаются, хотя до подключения определенного модуля все было хорошо,Мог ли я где-то ошибиться или мне нужен другой модуль?Я прикреплю package.json и webpack.config.js в спойлеры, если вам понадобится больше файлов, скажем.

prackage

"name": "lesson_boots",
              "version": "1.0.0",
              "description": "",
              "main": "index.js",
                "scripts": {
                "dev": "webpack-dev-server --mode development --open",
              "build": "webpack --mode production"
             },
              "author": "",
             "license": "ISC",
               "devDependencies": {
                  "babel-core": "^6.26.3",
                 "babel-loader": "^7.1.5",
                "babel-preset-env": "^1.7.0",
                "babel-preset-stage-3": "^6.24.1",
                "css-loader": "^1.0.1",
                  "extract-text-webpack-plugin": "^4.0.0-beta.0",
              "path": "^0.12.7",
               "style-loader": "^0.23.1",
             "webpack": "^4.26.1",
             "webpack-cli": "^3.1.2",
           "webpack-dev-server": "^3.1.10"
          },
          "dependencies": {
         "bootstrap": "^4.1.3",
         "jquery": "^3.3.1"
      }
 }

webpack.config.js

let path = require('path')
    const ExtractTextPlugin = require("extract-text-webpack-plugin");

   let conf = {
      entry: './src/index.js',
       output: {
         path: path.resolve(__dirname, './dist'),
         filename: 'main.js',
          publicPath: 'dist/'
           },
         devServer: {
        overlay: true
         },
          module: {
           rules: [
             {
               test: /\.js$/,
                 loader: 'babel-loader',
               },
              {
                 test: /\.css$/,
              use: ExtractTextPlugin.extract({
                 use: "css-loader"
               })
             }
           ]
       },
         plugins: [
           new ExtractTextPlugin("styles.css"),
          ]
 };

   module.exports = (env, options) => {
    let production = options.mode === 'production';

    conf.devtool = production
       ? false
        : 'eval-sourcemap';

      return conf;
   }

Answer 1

Для среды Dev вы можете просто настроить свои правила webpack.config.js, как указано ниже.

rules: [
             {
               test: /\.js$/,
                 loader: 'babel-loader',
               },
               {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
           ]

После изменений, которые вы можете внести в производственную среду.

Пожалуйста, установите mini-css-extract-plugin и импортируйте его в файл webpack.config.js.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

и в массиве правил файла webpack.config.js обновите правила, как указано ниже.

  rules: [
         {
           test: /\.js$/,
             loader: 'babel-loader',
           },
           {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
       ]

Надеюсь, это сработает.