Как запустить 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"
},
Так можно это реализовать или нет?