Root chunk with children chunk cannot be use
rsereir opened this issue · 4 comments
Current behaviour 💣
I configure my webpack to use 2 htmlwebpackplugins for my entrypoints: main ( url: localhost/ ) and admin ( url: localhost/admin ). When i go to localhost/plop it's seems good. On localhost/admin it seems good too but localhost/admin/plop does not work; it's main entrypoint instead of admin entrypoint.
Expected behaviour ☀️
admin path is a children of main path so i have to treat all admin path first with admin html webpack plugin config then other paths with main html webpack plugin config
Reproduction Example 👾
Main is marketplace
Admin is admin
Add this webpack config:
entry: {
marketplace: path.resolve(__dirname, './src/views/Marketplace/index.jsx'),
admin: path.resolve(__dirname, './src/views/Admin/index.jsx'),
},
output: {
path: path.resolve(__dirname, 'public/'),
filename: '[name]/[name].js',
chunkFilename: '[name]/[name].js',
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'admin/index.html',
template: path.resolve(__dirname, 'src/index2.ejs'),
chunks: ['admin'],
entryPointKey: 'admin',
base: '/admin/',
alwaysWriteToDisk: true,
inject: true,
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'src/index.ejs'),
chunks: ['marketplace'],
entryPointKey: 'marketplace',
alwaysWriteToDisk: true,
inject: true,
}),
new HtmlWebpackHarddiskPlugin(),
],
devServer: {
static: [path.resolve(__dirname, './public'), path.resolve(__dirname, './public/admin')],
historyApiFallback: true,
},
Environment 🖥
"html-webpack-plugin": "^5.3.1",
macbook with chrome browser
I am sorry but after reading this issue twice I don't understand the problem..
It looks like you are using devServer.static together with devServer.historyApiFallback in an unintended way..
In most cases you should not use HtmlWebpackHarddiskPlugin for your devServer..
@jantimon Thanks for your answer but my issue are not solved..
I have 2 entrypoints:
Marketplace -> https://localhost/ -> public/index.html
Admin -> https://localhost/admin -> public/admin/index.html
And this result:
https://localhost/ = Marketplace (public/index.html) [OK]
https://localhost/toto = Marketplace (public/index.html) [OK]
https://localhost/admin = Admin (public/admin/index.html) [OK]
https://localhost/admin/toto = Marketplace (public/index.html) [KO] <- should be Admin index
historyApiFallback redirects all 404 requests to /index.html
as public/admin/toto.html does not exist its a 404 and will be redirected to public/index.html
see more here: https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback