Force jQuery Slim Import In Webpack

January 8, 2018

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',
    }),
  ]
  ...
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.