CODEWITHSUNDEEP
javascriptrequirejsamdwebpack
Charles Ouellet
Charles Ouellet

Reputation: 6508

Webpack with AMD, generating a single file

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:

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.

Upvotes: 1

Views: 1547

Answers (1)

Charles Ouellet
Charles Ouellet

Reputation: 6508

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.

Upvotes: 2

Related Questions