CODEWITHSUNDEEP
webpack
bdx
bdx

Reputation: 3516

How can I split webpack generated JS to multiple files?

Previously, the site I've inherited has had all JS code exported to a single file which is used on all pages.

I've added a new page that would benefit from only having the JS for that specific page loaded when that page is the current one, so I want to split that out to a separate JS file.

Our current webpack.config.js contained this:

var loaders = [
  {
    test: /\.js$/,
    loaders: ['babel'],
    include: __dirname
  }
]

module.exports = {
  entry: {
    admin: './source/admin.js',
    main: '/source/index.js'
  },
  output: {
    filename: 'js/main.js',
    path: path.join(__dirname, 'production.new'),
    publicPath: '/production/'
  },
  module: {loaders: loaders}
};

I've never had to write a webpack config file before so after some poking around their documentation I tried adding this, but it didn't have the desired effect:


module.exports = {
  entry: {
    admin: './source/admin.js',
    main: '/source/index.js',
    newpage: '/source/newpage.js'
  },
  // ...
  // Truncated to remove config as above
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  } 
};

What I want is two .js files to be outputted: main.js and newpage.js. What's happening is that the contents of /source/newpage.js are just being appended to the end of main.js.

How can I make webpack output those as two separate files?

Upvotes: 2

Views: 2296

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4113

This is more or less my proposal, import './admin' into index.js file, it will solve your problem.

module.exports = {
  entry: {
    main: './source/index.js', // also includes admin.js
    newpage: './source/newpage.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
      }
    },
  }
}

Upvotes: 1

Related Questions