Module Parse failed

[mkcgphy]

I am trying to use webpack for Autocomplete. I am following the link

https://npm.runkit.com/webpack-jquery-ui/autocomplete.js?t=1569876630262

somehow when I try to run this in my project I am getting errors.

I have used the following settings in my project :

In Webpack.config.js :

var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
index:'./src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath:'dist/'
},
module: {
rules: [
{
test: /.css$/, use: [
{ loader: "style-loader" },
{ loader: "css-loader" }]
},
{
test: /.(jpe?g|png|gif)$/i,
loader:"file-loader",
options:{
name:'[name].[ext]',
outputPath:'assets/images/'
//the images will be emited to dist/assets/images/ folder
}
}
]
},
plugins: [
/* Use the ProvidePlugin constructor to inject jquery implicit globals */
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
})
]
// ,
// resolve:{
// alias: {
// // bind version of jquery-ui
// 'jquery-ui': 'jquery-ui/ui/widgets',
// 'jquery-ui-css': 'jquery-ui/themes/base'}
// }
};

In Index.ts file :

require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/menu.css';
import 'jquery-ui/themes/base/autocomplete.css';
import 'jquery-ui/themes/base/theme.css';
var $ = require('jquery');
var autocomplete = require('jquery-ui/ui/widgets/autocomplete');

Following are 4 errors I am unable to figure out :
[11:9:5] [build] Initializing...
[11:9:5] [build] Validating manifest...
[11:9:5] [build] Validating control...
[11:9:6] [build] Generating manifest types...
[11:9:6] [build] Compiling and bundling control...
[Webpack stats]:
Hash: aa8ed824f10b6173e0f7
Version: webpack 4.28.4
Time: 3369ms
Built at: 10/01/2019 11:09:09 AM
Asset Size Chunks Chunk Names
bundle.js 420 KiB main [emitted] main
Entrypoint main = bundle.js
[./AddressValidation/index.ts] 7.54 KiB {main} [built]
[./node_modules/jquery-ui/themes/base/autocomplete.css] 245 bytes {main} [built] [failed] [1 error]
[./node_modules/jquery-ui/themes/base/core.css] 235 bytes {main} [built] [failed] [1 error]
[./node_modules/jquery-ui/themes/base/menu.css] 231 bytes {main} [built] [failed] [1 error]
[./node_modules/jquery-ui/themes/base/theme.css] 306 bytes {main} [built] [failed] [1 error]
[./node_modules/jquery-ui/ui/keycode.js] 832 bytes {main} [built]
[./node_modules/jquery-ui/ui/position.js] 16.7 KiB {main} [built]
[./node_modules/jquery-ui/ui/safe-active-element.js] 1.01 KiB {main} [built]
[./node_modules/jquery-ui/ui/unique-id.js] 1010 bytes {main} [built]
[./node_modules/jquery-ui/ui/version.js] 287 bytes {main} [built]
[./node_modules/jquery-ui/ui/widget.js] 21.1 KiB {main} [built]
[./node_modules/jquery-ui/ui/widgets/autocomplete.js] 19.9 KiB {main} [built]
[./node_modules/jquery-ui/ui/widgets/menu.js] 19.2 KiB {main} [built]
[./node_modules/jquery/dist/jquery.js] 301 KiB {main} [built]

ERROR in ./node_modules/jquery-ui/themes/base/autocomplete.css 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| * http://api.jqueryui.com/autocomplete/#theming
| */

.ui-autocomplete {
| position: absolute;
| top: 0;
@ ./AddressValidation/index.ts 11:0-49

ERROR in ./node_modules/jquery-ui/themes/base/menu.css 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
| * http://api.jqueryui.com/menu/#theming
| */

.ui-menu {
| list-style: none;
| padding: 0;
@ ./AddressValidation/index.ts 9:0-41

ERROR in ./node_modules/jquery-ui/themes/base/core.css 14:0
Module parse failed: Unexpected token (14:0)
You may need an appropriate loader to handle this file type.
| /* Layout helpers
| ----------------------------------*/

.ui-helper-hidden {
| display: none;
| }
@ ./AddressValidation/index.ts 7:0-41

ERROR in ./node_modules/jquery-ui/themes/base/theme.css 17:0
Module parse failed: Unexpected token (17:0)
You may need an appropriate loader to handle this file type.
| /* Component containers
| ----------------------------------*/

.ui-widget {
| font-family: Arial,Helvetica,sans-serif/{ffDefault}/;
| font-size: 1em/{fsDefault}/;
@ ./AddressValidation/index.ts 13:0-42
[11:9:9] [build] Failed:
[pcf-1033] [Error] An error occurred compiling or bundling the control.