Search code examples
javascriptwebpackjquery-migrate

How to use jquery-migrate with webpack?


After npm install jquery-migrate, I could just require('jquery-migrate'); in the main scripts.js file. This works fine:

console.log(jQuery.migrateVersion); // JQMIGRATE: Migrate is installed with logging active, version 3.0.0

Now, I would like to set it so jquery-migrate is not present on the production version.

webpack.config.js:

var dev = process.env.NODE_ENV !== 'prod';
var webpack = require('webpack');
var dist = '/dist/js';

module.exports = {
    context: __dirname,
    entry: __dirname + '/src/js/scripts.js',
    output: {
        path: __dirname + dist,
        filename: 'scripts.js'
    },
    resolve: {
        alias: {
            'jquery': 'jquery/src/jquery',
            'jquery-migrate': 'jquery-migrate'
        }
    },
    plugins: dev ? [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'jquery-migrate': 'jquery-migrate'
        })
    ] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        })
    ]
};

This is not working:

console.log(jQuery.migrateVersion); // Undefined

How is it possible to load jquery-migrate form the webpack.config?


Solution

  • What we did at work was to put the require within a production check.

    if (__DEV__) {
      require('jquery-migrate');
    }
    

    You can have this if check as well: if (process.env.NODE_ENV !== 'production').

    That way, webpack sees it's dead code when bundling for production, and won't parse the require, and thusly include the module.

    To make those checks work, you should use the provide plugin to define them.

    new webpack.ProvidePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(dev) // Or some other check
        },
        __DEV__: JSON.stringify(true) // or something
    })
    

    Neither the ProvidePlugin or alias is needed for jquery-migrate, btw :)