Windows Server 2012 R2 Direct Access

webpack is a static module bundler for modern JavaScript applications.

Various syntaxes available : CommonJS, AMD and ES2015

CommonJS module uses module.exports to export - or make available- functions or variables to other code. It also uses require to pull-in this exported values.

Entry Indicates the main entry point of an application. It is where initial loading and application logic will be. Webpack uses the entry point to begin building the dependency graph and create modules as necessary.


// Simplest example
module.exports = {
  entry: './path/to/my/entry/file.js'

// another example
module.exports = {
  entry: {
      application: [

Output This tells webpack how to treat the bundled code.

output: {
    filename: "[name].[hash].js",
    path: `${__dirname}/public/assets`

output.filename: the filename of the resulting bundle. output.path : Absolute path for the resulting bundle. _dirname: Is a Node.js utility variable for the directory name of the current file.

Loaders Loaders enable webpack to process content other than JavaScript. Using loaders, we can get webpack to process many types of files - CSS, Images, Typescript and many others.

  module: {
      rules: [{
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/
        test: /\.vue/,
        loader: "vue-loader"
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']

test : tells webpack the type of files to process loader: the loader to use for this type of files loaders: an array of the loaders to use. exclude: the loader should exclude any files under specified folder

How to load image files with webpack file-loader Processing images with webpack

Webpack — The Confusing Parts

Getting Started with Webpack: Module Bundling Magic

Webpack Tutorial: Understanding How it Works

Webpack’s externals work with local paths too

// my-app/webpack.config.js
  externals: {
    'jquery': 'jQuery',
    /* ↑ With this line, Webpack will replace every
     *    import $ from 'jquery';
     * in your code with approximately
     *    const $ = window.jQuery;
     * This is useful if you already have jQuery in your global environment
     * and don’t want to download it several times.
     * Most people use `externals` this way. */
    '../foo/index.js': 'MyFoo',  
    /* ↑ Turns out, aliasing local paths works too!
     * This:
     *   import F from '../foo/index.js';
     * will be replaced approximatey with 
     *   const F = window.MyFoo;
     * Useful e. g. if you need to share your module between your old code in the global environment
     * and your new code in the current app bundle. */

How to bundle Material Design Admin Template with webpack?

After bundling Material Design Admin Template using webpack, I get the following warning and error on opening a web page.

// Warning jQuery.Deferred exception: $index is not defined ReferenceError: $index is not defined at r.fn.init.t.fn.pushpin

// Error Uncaught ReferenceError: $index is not defined at r.fn.init.t.fn.pushpin

The following are extracts of my webpack.config.js and application.js

// webpack.config.js module.exports = { entry: { application: [ “./assets/js/application.js”,

  // "./assets/css/application.scss"

}, resolve:{ alias: { vue$: ${__dirname}/node_modules/vue/dist/vue.esm.js, router$: ${__dirname}/node_modules/vue-router/dist/vue-router.esm.js, axios$: ${__dirname}/node_modules/axios/dist/axios.js, jquery$: ${__dirname}/assets/js/jquery-3.2.1.min.js, } }, plugins: [ new webpack.ProvidePlugin({ $: “jquery”, jQuery: “jquery” }) ] }

// application.js require(“expose-loader?$!expose-loader?jQuery!jquery”); require(“./materialize.min.js”); require(“./perfect-scrollbar.min.js”); require(“./plugins.js”); require(“./custom.js”);