Page-specific script, along with third-party scripts and application scripts in Webpack

Question

TL DR below.

I am looking for a way to use Webpack, for example, as I am using Gulpfile right now.

My Gulpfile does the following:

• It Uglifies tower components (e.g. jQuery, Air datepicker, MomentJS) into a single file (vendors.min.js)
• It merges each file in a specific folder, Uglifies the contents and processes it into another separate file. (Lib.min.js)
• It keeps track of the folder for new / changed files, accepts only the changed file, Uglifies and saves it to a folder (these are my files app, they depend on the page and can be downloaded on demand).

So now I have 3 types of files:

• vendors.min.js

  • Loaded on every page in my application.
  • This ensures that all the necessary third-party scripts are always available when you need them.

• lib.min.js

  • Loaded on every page.
  • This is my application 'framework' 'Library', it mainly searches for data attributes for elements and associates datipikers, tooltips, but also provides some useful functions such as clearing strings, formatting strings as money, etc.

• attachment /*. Min.js

  • This gives our developers a place to write JavaScript with specific text.
  • They are loaded ONLY on this page.

I'm new to webpack

I watched a few video tutorials about this, I see that it is powerful and can help me advance in JavaScript (read: use a more advanced structure and ES2015). I also read the Webpack tutorial, but can't find how to make it work for my framework.

So the question is:

TL DR

Webpack ( ) JavaScript JavaScript (, jQuery, MomentJS, bower, npm - ).

Answer 1

:

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

:

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

CommonsChunkPlugin , jQuery, MomentJS

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

( - 1)