Как запустить webpack без webpack-dev-server и перезагружать браузер при каждом изменении?

Как я могу перезагрузить браузер после изменений сборки, например, в webpack-dev-server, но без webpack-dev-server?

Я прекрасно понимаю, что webpack-dev-server хорош тем, что быстрее работает, что работает в ОЗУ, что папка сборки не создается...

Надоел этот прокси, все работает, все выводит, но все время выдает ошибки...

Я хочу попробовать работать без webpack-dev-server...

require('dotenv').config()
const path = require("path");

const webpack = require("webpack");
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require("autoprefixer");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const HtmlWebpackInjector = require("html-webpack-injector");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

const conf = require("./config");






const webCofig = {
  entry: {
    app: "./public/app/app.js",
    _head: "./public/app/head.js",
  },
  output: {
    path: path.join(__dirname, `${conf.publicBuildFolder}`),
    filename: "[name].js",
    publicPath: "/",
  },
  // devServer: {
  //   port: process.env.Dev_PORT,
  //   host: 'localhost',
  //   overlay: true,
  //   proxy: {
  //     "/": {
  //       target: "http://localhost",
  //     },
  //   },
  // },

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      {
        test: /\.sass$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|jpeg|svg|gif|webp|icon)$/,
        include: [path.join(__dirname, 'public', 'media', 'image')],
        use: [
          {
            loader: "file-loader",
            options: {
              name: "media/image/[ext]/[name].[ext]",
            },
          },
        ],
      },
      {
        test: /\.(mp3|wav|ogg)$/,
        include: [path.join(__dirname, 'public', 'media', 'audio')],
        use: [
          {
            loader: "file-loader",
            options: {
              name: "media/audio/[name].[ext]",
            },
          },
        ],
      },
      {
        test: /\.(mp4|webm|ogv)$/,
        include: [path.join(__dirname, 'public', 'media', 'video')],
        use: [
          {
            loader: "file-loader",
            options: {
              name: "media/video/[name].[ext]",
            },
          },
        ],
      },
      {
        test: /\.(html)$/,
        include: [path.join(__dirname, 'public', 'pages')],
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[folder]/[name].[ext]",
            },
          },
        ],
      },
    ],
  },

  performance: {
    maxEntrypointSize: 512000000,
    maxAssetSize: 512000000,
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style/index.css",
    }),
    new HtmlWebpackPlugin({
      filename: "./index.html",
      template: "./public/index.html",
      title: "Index",
      base: "/",
      favicon: "public/media/image/png/icon2.png",
    }),
    new HtmlWebpackPlugin({
      filename: "./error.html",
      template: "./public/error.html",
      title: "Page not found",
      base: "/",
      favicon: "public/media/image/png/error.png",
    }),
    new HtmlWebpackInjector(),
    new CleanWebpackPlugin(),
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin(), new HtmlMinimizerPlugin()],
  },
};




module.exports = (env, options) => {
  webCofig.devtool = options.mode === 'production' ? false : 'source-map';
  return webCofig;
};

"start": "nodemon server.js",

"dev": "cross-env NODE_ENV=development webpack --mode development --watch ",

"build": "cross-env NODE_ENV=production webpack --mode production"

},

Так можно это реализовать или нет?


Ответы (0 шт):