I am trying to set up a Webpack (version 5) configuration that specifies multiple entry points using the "Object Syntax" as described in the Webpack documentation at https://webpack.js.org/concepts/entry-points/#object-syntax.
According to the Webpack documentation, I should be able to specify an "entry" configuration as (for example):
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js',
},
};
But when I try to run Webpack with this configuration, I get an error:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.entry[0] should be a non-empty string.
-> A module that is loaded upon startup. Only the last one is exported.
My full webpack.config.js is as follows:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
'chunkone': './index1.js',
'chunktwo': './index2.js'
},
mode: 'development',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
target: 'web',
devServer: {
port: '5000',
static: {
directory: path.join(__dirname, 'public')
},
open: true,
hot: true,
liveReload: true,
proxy: {
'/api': 'http://localhost:8000',
}
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public', 'index1.html'),
chunks: ['chunkone']
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public', 'index2.html'),
chunks: ['chunktwo']
})
]
};
and my package.json is as follows:
{
"name": "sandbox8a",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "start node .\\server\\server.js && webpack-dev-server .",
"build": "webpack .",
"ver": "webpack --version"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.3",
"webpack": "^5.90.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
}
}
Can anyone suggest what I may be missing here?
As answered by the Webpack developer at https://github.com/webpack/webpack/discussions/18057#discussioncomment-8407045, my webpack.config and package.json had several issues.
The corrected webpack.config is as follows:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require("webpack");
module.exports = {
mode: 'development',
entry: {
'chunkone': './index1.js',
'chunktwo': './index2.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
},
target: 'web',
devServer: {
port: '5000',
static: {
directory: path.join(__dirname, 'public')
},
open: true,
hot: true,
liveReload: true,
proxy: {
'/api': 'http://localhost:8000',
}
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public', 'index1.html'),
filename: "index1.html",
chunks: ['chunkone']
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public', 'index2.html'),
filename: "index2.html",
chunks: ['chunktwo']
})
]
};
and the corrected package.json is as follows:
{
"name": "sandbox8a",
"version": "1.0.0",
"description": "",
"main": "index1.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "start node .\\server\\server.js && webpack-dev-server .",
"build": "webpack",
"ver": "webpack --version"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.6.0",
"webpack": "^5.90.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
}
}