Is it possible to pack two different modules in one webpack.config?

Question

I have a JS code which holds two modules under src folder.

awsdk: main business logic with main models and services
awfre: like a sub module, uses the first with some new business logic.

We want webpack to have two JS files, one per each folder (as explained above), is it possible?

NOTE: i'm using webpack v.^3.10.0

EDIT: This is my webpack.config.js file:

const path = require('path');
const webpack = require('webpack');
const pkg = require('./package.json');
const fs = require('fs');

const banner = `${pkg.name} - ${pkg.version} - (c) 2017 - ${pkg.author} - ${pkg.homepage} \n\n ${fs.readFileSync('LICENSE').toString()}`;

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './awsdk_module/lib/'),
    filename: 'awsdk.js',
    library: 'awsdk',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  devtool: 'source-map',
  module: {
    noParse: [/dtrace-provider$/, /safe-json-stringify$/, /mv/],
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, './src/awsdk'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.js$/,
        include: path.join(__dirname, './specs'),
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  node: {
    console: false,
    fs: 'empty',
    net: 'empty',
    module: 'empty',
    tls: 'empty',
  },
  devServer: {
    contentBase: path.join(__dirname, './specs'),
    inline: true,
    port: 8081,
  },
  plugins: [
    new webpack.BannerPlugin(banner),
  ],
};

@UniqIdentifierAssignedAtBirth yes, each folder has it's own entry — roeygol, Jul 07 '19 at 18:56
You can use splitChunks to pull each of them into their own file but that doesn't guarantee independence. If you want complete independence for the two bundles you can run webpack in multi-compiler mode where you build the two modules independently but at the same time. https://github.com/webpack/webpack/tree/master/examples/multi-compiler — Avin Kavish, Jul 07 '19 at 19:13

sdgluck · Answer 1 · 2019-07-08T14:54:00.807

2

Webpack supports multiple outputs via the entry configuration field.

Just give it an object. Something like this:

{
  entry: {
    awsdk: require.resolve(__dirname, './awsdk/index.js'),
    awfre: require.resolve(__dirname, './awfre/index.js')
  }
}

You will also need to update output.filename to use the [name] placeholder:

output: {
  filename: "[name].js"
}

Note that by default webpack v4 will try and pull out shared dependencies into "vendor" bundles so you may end up with more output bundles than you give it entries.

edited Jul 08 '19 at 14:54

answered Jul 07 '19 at 14:15

sdgluck

24,894
8
75
90

I ran your code and I got: `ERROR in chunk awfre [entry] awsdk.js Conflict: Multiple assets emit to the same filename awsdk.js`, Do I need to modify some more fields in the file ? – roeygol Jul 07 '19 at 15:13
Please share your config. Probably you are setting output to a fixed filename and not using a placeholder. See: https://stackoverflow.com/q/42148632/2039244 – sdgluck Jul 07 '19 at 17:10
I updated my question with my original config file. please advice if you can. – roeygol Jul 07 '19 at 18:48
@roeygol I have updated my answer with an extra step (use `[name]` placeholder) that should fix your issue. – sdgluck Jul 08 '19 at 14:54

Is it possible to pack two different modules in one webpack.config?

1 Answers1