How to bundle vendor and main scripts separately using webpack? - reactjs

Question

I really appreciate some help here, in this case, I would Like to separate my vendor.js and my main.js at the final build operation.
I've tried that before to loop through in my package.json devDependency for separate my third party libraries and put it into vendor.js, it is working correctly but it produces vendor.js that is unnecessary in building process since my third library already is in my main.js
here is my weppack.config.js
var config = {
devtool: 'eval-source-map',
cache: true,
entry: {
main: path.join(__dirname, "app", "App.js"),
},
output: {
path: path.join(__dirname, 'scripts', 'js'),
filename: '[name].js',
chunkFilename: '[name].js',
sourceMapFilename: '[file].map',
publicPath: '/scripts/js/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['es2015', { modules: false }],
'react',
],
plugins: [
'syntax-dynamic-import',
'transform-object-rest-spread',
'transform-class-properties',
'transform-object-assign',
],
}
},
},
],
},
resolve: {
extensions: ['.js', '.jsx' ,'.css', '.ts'],
alias: {
'react-loadable': path.resolve(__dirname, 'app/app.js'),
},
},
};

Answer 1

Due to this answer
in his webpack.config.js (Version 1,2,3) file, He has
function isExternal(module) {
var context = module.context;
if (typeof context !== 'string') {
return false;
}
return context.indexOf('node_modules') !== -1;
}
in his plugins array
plugins: [
new CommonsChunkPlugin({
name: 'vendors',
minChunks: function(module) {
return isExternal(module);
}
}),
// Other plugins
]
This should solve your problem like mine.