Javascript 导入库时遇到的问题

我最近遇到了一个interact.js，一个我想在我的一个项目中使用的库，但我无法让它工作

我已经通过npm安装了它

npm install interactjs --save

它在my package.json依赖项中显示为

  "dependencies": {
    "angular": "^1.6.4",
    "angular-ui-router": "^0.4.2",
    "interactjs": "^1.2.9"
  }

我还在main.js中导入了它，在那里我导入了其他lib和模块

import 'interactjs';

在angularjs中的项目中，我在控制器中的函数中使用了一些interact.js语法，但我得到以下错误：

app.js:57837 Uncaught Error: Module parse failed: path\controller.js Unexpected token (207:48)
You may need an appropriate loader to handle this file type.
|     drag() {
|         let drag = document.querySelector('.draggable');
|         interact(drag).draggable({ inertia: true; })
|     }
| 

    at Object.__webpack_require__.constructor.options.count (app.js:57837)
    at __webpack_require__ (app.js:658)
    at fn (app.js:86)
    at Object.__webpack_exports__.a (app.js:57778)
    at __webpack_require__ (app.js:658)
    at fn (app.js:86)
    at Object.<anonymous> (app.js:57896)
    at __webpack_require__ (app.js:658)
    at fn (app.js:86)
    at Object.module.exports (app.js:5219)

---

请粘贴webpack.config.js文件contents@GnanasekarS编辑了我的答案<代码>交互（拖动）.draggable（{惯性：true；}）正在使用；是的，但现在我得到了一个不同的错误：ReferenceError:interact没有定义，所以我设法让它工作，但前提是我通过CDN加载脚本。我猜导入不起作用，如果是这样的话，我如何在不使用cdn的情况下使其起作用？请粘贴webpack.config.js文件contents@GnanasekarS编辑了我的答案<代码>交互（拖动）.draggable（{惯性：true；}）正在使用；是的，但现在我得到了一个不同的错误：ReferenceError:interact没有定义，所以我设法让它工作，但前提是我通过CDN加载脚本。我猜导入不起作用，如果是的话，我如何在不使用cdn的情况下使其起作用？

const path = require('path');
const webpack = require('webpack');

/**
 * Plugins
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
/**
 * Env. vars
 */
const port = process.env.PORT || 3000;
const hostname = process.env.HOSTNAME || 'localhost';
const host = 'http://' + hostname + ':' + port;
const assetHost = process.env.ASSET_HOST || host + '/';
const paths = {
  source: 'src',
  dist: 'public'
};

module.exports = {
  entry: {
    app: [
      path.resolve('src/main.js'),
      'webpack-dev-server/client?' + host,
      'webpack/hot/only-dev-server'
    ]
  },
  output: {
    path: path.join(process.cwd(), 'public'),
    filename: '[name].js',
    chunkFilename: '[chunkhash].[name].js'
  },
  resolveLoader: {
    modules: ['node_modules']
  },
  resolve: {
    modules: [
      'devtools',
      'src',
      'node_modules'
    ],
    extensions: ['.ts', '.js', '.json', '.scss', '.css', '.html', '.jpg', '.png'],
    alias:  {
        'game': path.resolve('src/modules/game')
    }
  },
  node: {
    global: true,
    process: true,
    console: true,
    fs: 'empty'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve('src/index.ejs'),
      inject: 'head'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    inline: true,
    port: port,
    publicPath: assetHost, // Make sure publicPath always starts and ends with a forward slash.
    contentBase: [
      path.join(process.cwd(), paths.source),
      path.join(process.cwd(), paths.dist)
    ],
    clientLogLevel: 'none',
    noInfo: true,
    historyApiFallback: {
      disableDotRule: true
    }
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      },
      {
        test: /\.(jpe?g|gif|png|woff|woff2|eot|ttf|svg)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                // path.resolve('node_modules/xbem/src/'),
                // path.resolve('src/themes/' + config.theme)
              ]
            }
          }
        ]
      }
    ]
  }
}