Webpack with AMD, generating a single file

Question

We are actually migrating from RequireJS to Webpack to be able to switch to the CommonJS modules instead of AMD without having to refactor everything at the same time.

We are using Almond with RequireJS that allowed us to generate a single .js file that our customers were using.

We want to do the same thing with Webpack, but actually it generates two assets, one that makes a JSONP call to load the other asset asynchronously.

We got like:

• 1.bundle.js
• bundle.js

bundle.js file makes a JSONP request to load 1.bundle.js file, but this is not what we want to do. We need a single standalone file.

Is it possible to generate only one .js file?

Here is my webpack configuration, please note that we are using grunt-webpack task inside our Gruntfile.coffee file.

entry: './app/pack.coffee'
target: 'web'
output:
  path: '.webpack/'
  filename: 'app.js'
resolve:
  root: path.resolve './app'
  alias:
    'underscore': path.resolve './vendors/underscore.js'
    'backbone': path.resolve './vendors/backbone/backbone.js'
    'accounting': path.resolve './vendors/accounting.js'
    'moment': path.resolve './vendors/moment.js'
    'tipsy': path.resolve './vendors/jquery.tipsy.js'
    'json2': path.resolve './vendors/json2.js'
    'backbone.wreqr': path.resolve './vendors/backbone.wreqr/lib/backbone.wreqr.js'
    'backbone.babysitter': path.resolve './vendors/backbone.babysitter/lib/backbone.babysitter.js'
    'backbone.marionette': path.resolve './vendors/marionette/lib/backbone.marionette.js'
    'backbone.syphon': path.resolve './vendors/backbone.syphon.js'
    'backbone.paginator': path.resolve './vendors/backbone.paginator.js'
    'backbone.routefilter': path.resolve './vendors/routefilter/src/backbone.routefilter.js'
module:
  loaders: [
    { test: /\.coffee$/, loader: "coffee-loader" },
    { test: /\.html/, loader: "raw-loader" },
    { test: /\.(coffee\.md|litcoffee)$/, loader: "coffee-loader?literate" }
  ]
plugins: [
  new webpack.optimize.LimitChunkCountPlugin
    maxChunks: 1
]

UPDATE

Using the LimitChunkCountPlugin seems to do the trick! Don't know if Webpack creates multiple chunks when your generated file is large for optimization purposes.

Answer 1

Using the LimitChunkCountPlugin seems to do the trick! Don't know if Webpack creates multiple chunks when your generated file is large for optimization purposes.

Please see the update in the original question to see how I included it.