We Keep Coding

No autoreload page , webpack-dev-server

All work correctly , webpack-dev-server compiling after change in files, but browser folder no automatically reload
Packages installed:
"webpack": "^5.21.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
Thanks
code in webpack.config.js
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd
console.log(isDev)
const filename = ext => isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`
const jsLoaders = () => {
const loaders = [
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
]
if (isDev) {
loaders.push('eslint-loader')
}
return loaders
}
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: ['#babel/polyfill', './index.js'],
output: {
filename: filename('js'),
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.js'],
alias: {
'#': path.resolve(__dirname, 'src'),
'#core': path.resolve(__dirname, 'src/core')
}
},
devtool: isDev ? 'source-map' : false,
devServer: {
port: 3000,
hot: isDev,
},
***
}
}
NPM scripts to start(y use 'start' script)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack serve --hot --inline --open",
"build": "cross-env NODE_ENV=production webpack --mode production"
},

Try upgrading to the beta webpack-dev-server (v4)

How import from webpack bundle?

I built my es6 code by webpack, but I can't import from this built file. I get "undefined"
This is my src code:
export const debugFunc = () => {
console.log('debug')
}
And there is I try to use it:
import { debugFunc } from './debugFunc'
my webpack config is very simple
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode: 'production',
output: {
path: __dirname + "/lib",
filename: "main.js",
},
};

How to connect secure on localhost through webpack

I have a webpack plugin as below, I want to user localhost secure , how can I do that ? I do not see any require('http') as in the nodejs server, how can I do that with this webpack configuration ?
Should I prepare some SSL certificate ? If so where should I use them ?
Here is webpack configuration for development
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})

devServer: {
https: true,
...
},

Webpack dev middleware for all routes

I configured webpack dev middleware, when I go to index page / all works fine, otherwise page Not Found, how to make work dev server for all paths ?
const Koa = require('koa');
const webpack = require('webpack');
const devMiddleware = require('koa-webpack-dev-middleware')
const path = require('path');
const fs = require('fs');
const PORT = 3000;
const app = new Koa();
const config = require('./webpack.config');
const compiler = webpack(config);
app.use(devMiddleware(compiler, {
publicPath: config.output.publicPath,
historyApiFallback: true,
stats: { colors: true },
}));
app.listen(PORT, function () {
console.log(`Dev Server port: "${3000}"`);
});
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
}
}

HMR in express - webpack config

I'm trying to set up HMR with my express sever. When I run node app, I see that webpack compiles, SQL seeds DB and node runs in my terminal . My app runs and seems to work, however when I make a change I don't see the change. I also don't see the change when I refresh the app either!
What am I missing? I think I'm close.
note: I'm following : http://andrewhfarmer.com/understanding-hmr/
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import routes from './config/routes'
ReactDOM.render(
routes,
document.getElementById('root')
);
if (module.hot) {
module.hot.accept();
}
webpack.config
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/index.html',
filename: 'index_bundled.html',
inject: 'body',
})
module.exports = {
entry: {
"jquery": __dirname + '/public/js/lib/jquery/jquery-2.0.3.min.js',
"bootstrap": __dirname + '/public/bootstrap/js/bootstrap.min.js',
"index": [__dirname + '/app/index.js',
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false'],
},
output: {
path: __dirname + '/public',
filename: '[name].js',
publicPath: '/',
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.css$/, loader: 'style!css?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]'},
],
},
devtool: 'cheap-module-inline-source-map',
plugins: [
HTMLWebpackPluginConfig,
new ExtractTextPlugin("dist/[name].css"),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
app.js
var express = require('express');
var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackHotMiddleware = require("webpack-hot-middleware");
var compiler = webpack(require("./webpack.config.babel.js"));
/* Sequelize stuff */
var app = module.exports = express();
app.use(webpackDevMiddleware(compiler, {
hot: true,
filename: 'index.js',
publicPath: '/',
stats: {
colors: true,
},
historyApiFallback: true,
}));
//app.use(require("webpack-hot-middleware")(compiler));
app.use(webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 2000,
}));
/* APIs and routes */
// Starting express server
http.createServer(app).listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});