Force jQuery Slim Import In Webpack

We could use easily use jQuery slim in webpack (20% smaller in size, excludes the ajax and effects module).

// import 'jquery'import 'jquery/dist/jquery.slim.js'

Problem arise when other packages import 'jquery' which causes both jquery.js and jquery.slim.js to be included.

To enforce that only jquery.slim.js is used, you can use resolve.alias to auto convert import 'jquery' to import 'jquery/dist/jquery.slim.js'.

Edit webpack config file.

module.exports = {  ...  resolve: {    extensions: ['.js'],    alias: {      'jquery': 'jquery/dist/jquery.slim.js',    }  },  ...}

Use webpack.ProvidePlugin to make jquery accessible globally using $ and jQuery.

var webpack = require('webpack');module.exports = {  ...  plugins: [    new webpack.ProvidePlugin({      '$': 'jquery',      jQuery: 'jquery',    }),  ]  ...}