javascript - In webpack can I only use commonchunks plugin in one entry bundle -
i have app 2 bundles, , common modules e.g. react
extracted vendor bundle. adding 3rd bundle don't want extract common dependancies from. possible.
this question related this one creating multiple vendor bundles each entry point, whereas want 1 of bundles not require vendor. in case because script simple site verification script being set in head, before vendor
bundlde. still want able use modules in head
bundle.
const webpack = require('webpack'); const path = require('path'); const config = { entry: { vendor: [ 'jquery', 'react', 'react-dom' ], main: [ './bundles/main/app', ], cms: [ './bundles/cms/app' ], head: [ './bundles/head/app' ], }, output: { filename: '[name]-bundle.js', path: '../app/assets/webpack', }, plugins: [ new webpack.optimize.commonschunkplugin({ name: 'vendor', filename: 'vendor-bundle.js', minchunks: infinity, }) ], module: { loaders: [ {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/}, ], }, }; module.exports = config;
it seems similar question on code splitting multiple bundles did answer question. in particular michael margiel's answer having multiple vendor bundles specified multiple commonschunkplugins think cleanest approach.
having entry specific vendor chunks using commonschunkplugins multiple times:
new webpack.optimize.commonschunkplugin("vendor-page1", "vendor-page1.js", infinity), new webpack.optimize.commonschunkplugin("vendor-page2", "vendor-page2.js", infinity)
and declare different extenral libraries different files:
entry: { page1: ['entry.js'], page2: ['entry2.js'], "vendor-page1": [ 'lodash' ], "vendor-page2": [ 'jquery', 'react' ] },
this enabled me have bundle without vendor includes without needing additional steps, have vendor 3rd bundle if wanted, down track.
my config in end looked this:
const webpack = require('webpack'); const path = require('path'); const config = { entry: { head: ['./bundles/head/app'], main: ['./bundles/main/app'], cms: ['./bundles/cms/app'], 'vendor': [ 'babel-polyfill', 'jquery', 'react' ], 'vendor-cms': [ 'jquery' ] }, output: { filename: '[name]-bundle.js', path: '../app/assets/webpack', }, plugins: [ new webpack.optimize.commonschunkplugin({ name: 'vendor', filename: 'vendor-bundle.js', chunks: ['main'], minchunks: infinity, }), new webpack.optimize.commonschunkplugin({ name: 'vendor-cms', filename: 'vendor-cms-bundle.js', chunks: ['cms'], minchunks: infinity, }), new webpack.defineplugin({ 'process.env': { node_env: json.stringify(nodeenv)}, }), ], module: { loaders: [ {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/}, ], }, }; module.exports = config;
Comments
Post a Comment