How to auto-rebuild bundle with webpack-dev-server without run command again?

Question

I'm a newbie in webpack and I'm using webpack 4 for my project. But I have a problem, I have some file scripts. In the first time to build with webpack dev server, it's run okay. But when server running, I continue create a new file script(example: c.js), rename or delete the exist file the server not auto build this script to main.js. How can automatic webpack rebuild my new file(c.js) to main.js without run command again?

This is my repo on github: https://github.com/aiduc93/webpack4-scss-pug-es6

You can follow this step to reproduce my problem:

Step 1: start server with 'npm run dev' and run localhost:3000 in browser.

Step 2: when server running, we create new file(c.js), you can copy my code in hide.js or show.js and change the pluginName to 'anything'(ie: pluginName='clickable')

Step 3: go to index.pug, create new p tag with data-clickable(ie: p(data-clickable) clickable)

Step 4: refresh page in browser and click to text clickable. Js will not run because it not recompile.

This is my structure

//folder javascript in project
  javascript
     | hide.js
     | show.js
     | server.js
//folder dist after build
  dist
     | main.js

This is script in package.json

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --hot",
"build": "webpack --mode production"},

This is webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = { 
  entry: { main: glob.sync('./src/**/*.js*')} ,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  devtool: 'inline-source-map',
  watch: true,
  
  module: {
    
    rules: [
      {
        test: /\.pug$/,
        use: ["html-loader", "pug-html-loader"]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]

      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: 'style-loader',
            use:  [   'css-loader', 'sass-loader']
          })
      },
      {
        type: 'javascript/auto',
        test: /\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "./plugin-config/[name].[ext]"
            }
          }
        ]
      }
    ]
  },

  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    inline: true,
    port: 3000,
    // historyApiFallback: true,
    hot: true
  },
  plugins: [
    new ExtractTextPlugin(
      { filename: 'style.css'}
    ),
    new CleanWebpackPlugin('dist', { watch: true,
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
    }),
    new WebpackMd5Hash(),
  ]
};

Answer 1

In webpack 4 only real entry-points are entry-points, this means, no vendor-scripts, plugins...in entry. You cannot use glob here beause it creates an array of all js-files and only server.js is your real entry-point for your application!

Adding a js-file to your wp project doesn't mean it will be compiled as you don't reference it anywhere, so wp cannot know that it is needed. WP creates a dependency graph starting from the dependencies of your entry-point(s) and creates the bundle(s).

Your server.js is your entry-point and should look like this:

import "../stylesheets/style.scss";
import $ from 'jquery';
import "./clickable"  // without import no recompile!
import "./hide"
import "./show"

console.log("his");
console.log("hello, world23");

The entry-point in your webpack.config.js:

module.exports = {
    entry: {
      main: path.resolve(__dirname, "./src/javascripts/server.js")
      },