CODEWITHSUNDEEP
javascriptwebpackgulp
Milanzor
Milanzor

Reputation: 1930

Page-specific JavaScript together with third-party scripts and application-wide scripts in Webpack

TL;DR at the bottom.

I'm looking for a way to use Webpack like the way I'm using a Gulpfile right now.

My Gulpfile does the following:

  1. It Uglifies bower components (like jQuery, Air datepicker, MomentJS) into a single file (vendors.min.js)
  2. It concats every file in a specific folder, Uglifies the contents and processes it into another single file. (lib.min.js)
  3. It watches a folder for new/changed files, takes only the changed file, Uglifies it and saves it into a folder (these are my app files, they are page specific and can be loaded on demand).

So now I have 3 types of files:

  1. vendors.min.js

    • Loaded on every page in my application.
    • These make sure all the required third-party scripts are always available when you need them.

  2. lib.min.js

    • Loaded on every page as well.
    • This is my application's 'framework' 'Library', it mostly looks for data-attributes on elements and binds datepickers, tooltips but also provides some utility functions like cleaning Strings, formatting Strings as money etc.

  3. app/*.min.js

    • These give our developers a place to write page specific JavaScript.
    • They are loaded ONLY on that page.

I'm new to Webpack

I've watched a couple of video tutorials about it, I can see it is powerful and can help me to get further into JavaScript (read: use a more advanced structure and ES2015). I've also read through the Webpack tutorial but can't find how to make it work for my structure.

So the question is:

TL;DR

How can I use Webpack to have global (application wide) AND page-specific JavaScript in my applications and have them use third-party vendors (like jQuery, MomentJS, either through bower or npm or something).

Upvotes: 4

Views: 1342

Answers (1)

Jonatan Lundqvist Medén
Jonatan Lundqvist Medén

Reputation: 2860

You should have a entry config for each page like this:

entry: {
    page1: ['./src/page1.js'],
    page2: ['./src/page2.js'],
}

And output like:

output: {
    path: `${__dirname}/app/`,
    filename: '[name].min.js',
},

And then use the CommonsChunkPlugin plugin to build a global file with things like jQuery, MomentJS

plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors.and.lib.min.js'),
]

(This is for webpack version 1)

Upvotes: 4

Related Questions