How to bundle vendor and main scripts separately using webpack?

问题

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'),
        },
    },
};

回答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.

来源：https://stackoverflow.com/questions/58362550/how-to-bundle-vendor-and-main-scripts-separately-using-webpack

标签

reactjs

Webpack

chunks