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?
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 :)