How can I create two different entry points for devServer and for production in webpack.config file? - npm

Question

I have a npm accessible-date-picker package that is a React component. It is setup using webpack. I would like to have two entry points: one for the production environment that builds from the demo folder and one for the production environment. The idea is to make it possible to work with an example code in the Demo folder for improvements and when everything is done, build and publish as a npm package.
I can't seem to get the correct syntax down to make two entry points work. Either I get a production ready version that fails when development is run or I get a production ready version.
Here is the folder structure for the project:
|dist
|demo
||index.tsx
|src
| | components
| | container
| | | DatePicker.tsx
Here is webpack.config file that works like a charm for production but can't get development server working. I am not sure how to add a second entry point for the devServer:
entry: "./src/container/DatePicker.tsx",
devtool: "source-map",
devServer: {
contentBase: path.join(__dirname, './dist'),
compress: true,
port: 4000,
},
resolve: {
alias: {
'react': path.resolve(__dirname, './node_modules/react'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
},
externals: {
react: {
commonjs: "react",
commonjs2: "react",
amd: "React",
root: "React"
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "ReactDOM",
root: "ReactDOM"
}
},
output: {
path: path.join(__dirname, './dist'),
filename: 'accessible-datepicker.js',
libraryTarget: 'umd',
publicPath: '/dist/',
umdNamedDefine: true
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
},
},
},
{
test: /\.css$/i,
use: [
"style-loader",
"#teamsupercell/typings-for-css-modules-loader",
{
loader: "css-loader",
options: { modules: true },
},
],
},
],
}
};
Last but not least the package.json:
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production",
"prepublish": "rm -rf ./dist && npm run build",
"test": "jest"
},
"dependencies": {
"moment": "^2.29.1"
},
"peerDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.7",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/runtime": "^7.12.5",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#types/fork-ts-checker-webpack-plugin": "^0.4.5",
"#types/jest": "^26.0.15",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/webpack": "^4.41.25",
"#types/webpack-dev-server": "^3.11.1",
"#typescript-eslint/eslint-plugin": "^4.8.1",
"#typescript-eslint/parser": "^4.8.1",
"#wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.1",
"css-loader": "^5.0.1",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
"eslint": "^7.14.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"fork-ts-checker-webpack-plugin": "^6.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-jest": "^26.4.4",
"ts-node": "^9.0.0",
"typescript": "^4.1.2",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}
If someone could point out how to write a second entry point that would work with a development server would be of great help.