using webpack to build and run the vanilla javascript project which have node js and express js, webpack build working fine but running after making some changes in webpack.config.js file, it stopped working although build command run successfully
below is the
package.json
"scripts": {
"client": "webpack --mode production --config webpack.client.config.js",
"server": "webpack --mode production --config webpack.server.config.js",
"clean": "rd /s /q dist >nul 2>&1|echo.>null",
"start": "node ./dist/server.js",
"build": "npm run client && npm run server",
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@babel/eslint-parser": "^7.22.9",
"@babel/register": "^7.0.0",
"babel-loader": "^9.1.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"eslint": "^8.30.0",
"eslint-webpack-plugin": "^3.2.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"http-proxy-middleware": "^2.0.6",
"mini-css-extract-plugin": "^2.7.2",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.1.4",
"webpack-dev-middleware": "^6.0.1",
"webpack-hot-middleware": "^2.25.4",
"webpack-node-externals": "^3.0.0"
},
using below webpack.config.js
webpack.config.js ( config as object )
const plugins = require("./webpack.plugin.config");
const modules = require("./webpack.modules.config");
const baseConfig = {
entry: { home: './home.js', server: './server/server-dev.js' },
devServer: {
static: "./dist",
open: true,
hot: true
},
output: {
path: './dist/',
publicPath: "/",
filename: "[name].js",
chunkFilename: "[name].js",
assetModuleFilename: "assets/[hash][ext][query]",
clean: true
},
plugins: plugins,
module: modules,
mode: "production",
target: "node", // "web"
node: {
__dirname: false,
__filename: false
},
externals: [nodeExternals()],
devtool: "eval-source-map",
resolve: {
extensions: [".html", ".js", ".json", ".css"]
}
};
module.exports = baseConfig;
build working fine and start also working fine.
now
I want to cature env and args value so convert config into method as below
webpack.config.js ( config as method )
const nodeExternals = require("webpack-node-externals");
const plugins = require("./webpack.plugin.config");
const modules = require("./webpack.modules.config");
const config = (env, args) => {
console.log(env, args);
return {
entry: {
home: './home.js',
server: './server/server-dev.js'
},
devServer: {
static: "./dist",
open: true,
hot: true
},
output: {
path: "./dist",
publicPath: "/",
filename: "[name].js",
chunkFilename: "[name].js",
assetModuleFilename: "assets/[hash][ext][query]",
globalObject: "typeof self !== 'undefined' ? self : this",
clean: true
},
plugins: plugins,
module: modules,
mode: "production",
target: "node",
node: {
__dirname: false,
__filename: false
},
externals: [nodeExternals()],
devtool: "eval-source-map",
resolve: {
extensions: [".html", ".js", ".json", ".css"]
}
};
};
module.exports = config;
here webpack build job running fine but when start it npm run start
, it just return long webpack config and stops with below error
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration should be an object:
so error says it require object, so change last line to
trial 1
module.exports = config();
but here config() require 2 parameter so it is not working
trial 2
now directly write module.exports against method as below
module.export = (env.args) => {
but still facing same error.
trail 3
change config object property using function
const baseConfig = { ... }; module.exports = (env, args) => { console.log(env, args); baseConfig .mode = args.mode; return baseConfig; };
but same error on start.
someone please help to find the issue and suggest how to fix
checked similar question but all solution doesnt work because all ther areusing object config
update
seems like the issue is in server-dev.js file which is using webpack.config.js inside it and here is the content ( shared the relevent code for brevity )
server-dev.js
import express from "express";
import fs from "fs";
import path from "path";
import { webpack } from "webpack";
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import config from "../../webpack.config.js";
const app = express();
const router = express.Router();
const currentDirectory = process.cwd(); // current directory
const DIST_DIR = path.join(path.resolve(currentDirectory, "dist"));
const HTML_DIR = path.join(DIST_DIR, "html");
const HTML_FILE = path.join(HTML_DIR, "index.html");
const compiler = webpack(config);
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
})
);
app.use(webpackHotMiddleware(compiler));