使 babel 运行时全局到不同的 webpack 包

Question

Ecosystem details for my web application:

• ES6
• Babel
• Webpack

Our application has its own architecture artifact and then each widget onside the page has its own artifact. Everything uses the above mentioned ecosystem things.

For simplicity sake, lets say I have artifact Arch for architecture and w1 and w2 artifact for my 2 widgets. If I bundle all these artifacts individually they produce a bundle where the babel-runtime is included in all the three bundles. so when I put them together inside the web page I am basically including same piece of code ( babel-runtime ) 3 times.

Question: Is their a way to build each bundle individually but not include the babel-runtime code so that I can include babel-runtime code globally to be consumed by all the three bundle files?

Answer 1

Yes, you should use the CommonsChunckPlugin

The way to use it is as follows, in your webpack.config.js file:

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('shared.js');

module.exports = {
  entry: {
    bundle1: '.src/fileForBundle1.js',
    bundle2: '.src/fileForBundle2.js'
  },
  output: {
    path: 'build',
    filename: '[name].js'
  },
  plugins: [
    commonsPlugin,
  ],
  module: {
    loaders: [
      // ...
    ]
  }
}

All the shared code will be in the shared.js file, you just have to include this file in every page that has a different bundle.