3/28/2017

[Webpack] Import jquery-ui in ES6 syntax

The simplest way to use jquery and jquery-ui is include the script tag in HTML like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
However, if you want to import jquery and jquery-ui in ES6 format as following:
import $ from 'jquery';
import 'jquery-ui';
Here is a way:
First of all, install and save them in package.json:
npm i --save jquery
npm i --save jquery-ui-dist
Secondly, add a alias in webpack configuration:
resolve: {
  root: [
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../src'),
  ],
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  },
  extensions: ['', '.js', '.json'],
}