Webpack - Build two libraries

Question

Im new to webpack 3. Im working on a project that we want to split in libraries: AppLibrary and MyLibrary.

My purpose is to be able to build these two files:

<script src="./MyLibrary.js"></script>
<script src="./AppLibrary.js"></script>
<script>

new AppLibrary(MyLibrary);

</script>

I would like to do the building using only one webpack command instead of building the libraries with two commands.

Because I dont know how to do it, I have two webpack.config files. One for AppLibrary and another one for the MyLibrary.

appLibrary.webpack.js

const path = require('path');

module.exports = {
  entry: {
    app: './src/App/app.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components|device)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  },
  output: {
    path: path.resolve( __dirname, 'dist'),
    filename: '[name].js',
    library: 'AppLibrary'
  }
};

library.webpack.js

const path = require('path');

module.exports = {
  entry: {
    library: './src/Library/Library.js'
  },
  externals: {
    "some": "some"
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /(node_modules|bower_components|externals)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }]
  },
  output: {
    path: path.resolve( __dirname, 'dist'),
    filename: '[name].js',
    library: 'MyLibrary'
  }
};

Currently I need to exec two commands to output two libraries. Is there any way to handle this situation?

Folder structure is like follow:

- src
  |
  |- /dist
  |-- library.js
  |-- app.js
  |
  |- /Library
  |-- library.webpack.js
  |
  |- /App
  |-- app.webpack.js

Answer 1

The options are the same for all exported libraries

To export multiple files using a singular config file, try setting an entry option in a single webpack.config.js.

The following example should be located in src and puts the two bundles in your dist folder.

entry: {
  app: "./App/app.js",
  library: "./Library/Library.js"
},
output: {
  filename: "[name].js",
  path: path.resolve(__dirname, "dist")
}

---

The options are the different for the exported libraries

To add multiple configurations to a webpack config file, you can use an array. When running webpack, all configurations are built. (Notice the square brackets after module.exports =)

(Supported since webpack 3.1.0)

module.exports = [
{
  entry: {
    app: "./App/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
  externals: ...
}, 
{
  entry: {
    library: "./Library/Library.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
  externals: ...
}]