I am working in React and want to publish my code . I am creating bundle using webpack , since I want the bundle to be divided in three parts , that is , my code should have divided in to three different files so that not only one file get populated too much . I went through the official docs of webpack and other online sites but still not found the solution for this .
Add a comment
|
2 Answers
Here is a complete configuration webpack.config.js that you can base yours on.
const webpack = require('webpack');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const WebpackConfig = {
// multiple component entry points
entry: {
AppPart1: './src/AppPart1',
AppPart2: './src/AppPart2',
AppPart3: './src/AppPart3'
},
// generate files
output: {
path: './assets',
// creates JS files like "AppPart1.js"
filename: '[name].js'
},
module: {
preLoaders: [
// add any pre-loaders here, OPTIONAL
],
loaders: [
// add any loaders here, like for ES6+ transpiling, React JSX etc
]
},
resolve: {
extensions: ['.jsx', '.js']
},
plugins: [
// this will factor out some common code into `bundle.js`
new CommonsChunkPlugin('bundle.js'),
]
};
module.exports = WebpackConfig;
At the end of webpack build, here is what you will have in the assets folder
AppPart1.jsAppPart2.jsAppPart3.jsbundle.js
bundle.js will contain some shared code and must be included on all your pages along with the appropriate part file for the page.
5 Comments
nyumerics
In that case just put one key into
entry. Isn't that obvious?
shubham
can it be able to produce multiple output files ?
nyumerics
I have clearly mentioned that it will produce multiple files with the common chunk in
bundle.js. So you can afford to load only the code that is actually needed for a given page by combining it with another chunk file from the entry points list. If you want a single module to be splitted, that is not an easy problem. The problem definition is just vague.shubham
In my case there is only one bundle file is creating and I want to split that one , And I have clearly mentioned in the question statement that I want my bundle file to be split in three different parts .
nyumerics
The only way to do that is to have multiple entry points. You cannot simply take a bundle and split it into 3 parts. By having 3 entry points, you are clearly denoting that these 3 modules form independent parts of the app up to a certain extent.
If you have the three separate files, you can put multiple entry points on your webpack config:
entry: {
"bundle1":"./src/app/somefile1.jsx",
"bundle2":"./src/app/somefile2.jsx,
"bundle3":"./src/app/somefile2.jsx"
}
1 Comment
JFAP
You can only accomplish this by having multiple entry points so you get multiple bundled js files.