CODEWITHSUNDEEP
reactjswebpack
susie derkins
susie derkins

Reputation: 584

How to use webpack to build two separate bundles for different websites

I have a project built with React with a bunch of components that I use webpack to bundle into mysitebundle.js for my own website.

I would like to provide a small subset of my components to be available for 3rd-party client sites to use. I would use webpack to make a (smaller) bundle, clientsitebundle.js from the same codebase. My own site has an App component, which is the entry point; the client code would have a ClientComponent component, which would be its entry point.

I am not sure how best to set this up. I can envision two entirely-separate webpack configuration files set up - is there a cleaner way to have a single webpack config that when I run npm run build spits out the two .js files? Or is there a better way to organize React code?

One thing to consider is that I need the name of the client bundle to remain fixed (so it can be included as a script tag). But I might wish to split my main site's bundle into a few different lazy-loaded chunks.

In searching stackoverflow for help, I have seen a number of questions around code-splitting, but I don't think this is quite what I am looking for. My apologies if I'm incorrect - I am a relative beginner with webpack. Thanks for your help.

Edit: here is webpack as suggested by a commenter:

module.exports = {
  entry: {
    mysite : ['babel-polyfill', './src/site/index.js']
  },
  output: {
    path: path.join(__dirname, outputDirectory),    
    filename: 'bundle.js'
  },
  module: {
    rules: [//css, js rules...]
  },
  
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
      template: './src/site/static/index.html'
    }),
    
  ]
  
};

Upvotes: 3

Views: 4805

Answers (1)

Sxribe
Sxribe

Reputation: 829

Foreword - I can't test this on my machine, so this is my best guess.

Webpack supports multiple bundles with different entrypoints. You can try something like this:

module.exports = {
    entry: {
        main: "./your/path/to/your/main/site",
        client: "./path/to/ClientComponent.js"
    },
    output: {
        path: "./path/to/desired/dist",
        filename: "[name]-bundle.js"
    }
};

This would give you two files, main-bundle.js and client-bundle.js.

Upvotes: 3

Related Questions