0
138
ViewsSplit multiple entry points into distinguishable builds that work on their own
I have written a React app that has a standalone version and an embedded version. The difference is that the embedded version misses afew components and that it does a lot of lazy loading (it is heavily reduced in size versus the standalone version). Because of the lazy loading the embedded version generates a lot of js files. Now what I'm trying to achieve is that whenever I build my project(s) that it creates two folders;
- build/standalone => all JS files needed to import the standalone application into any html project
- build/embedded => all JS files needed to import the embedded application into any html project
How could I do this?
webpack.common.js
module.exports = {
entry: {
standalone: path.resolve(__dirname, '../src/index.standalone.tsx'),
embedded: path.resolve(__dirname, '../src/index.embedded.tsx')
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
path: path.resolve(__dirname, '..', './build'),
filename: '[name].[contenthash].bundle.js' // I know I could do ./[name]/[contenthash].bundle.js but this also results in folders for chunks
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all'
}
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './public/index.html')
})
]
};
What I get right now, which is not what I want;
With this its nearly impossible to know what files you need to, for example, implement the embedded version on my webpage.
1 answers
Answer question0
One straightforward way to achieve this is to make output.filename a function and use the chunk name.
output: {
path: path.resolve(__dirname, '..', './build'),
filename: (pathData) => {
return `${pathData.chunk.name}/[name].[contenthash].bundle.js`;
},
},
There are more examples in the linked docs.