webpack无法导入npm软件包

Question

I've got a very simple webpack config

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./scripts/app.ts",
  output: {
    filename: "./www/scripts/appBundle.js",
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  devServer: {
    contentBase: './www'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              configFile: "scripts/tsconfig.json"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './www/index.ejs'
    })
  ],
  devtool: "source-map"
};

I'm importing an npm package (nouislider), build works fine but when I run the app I get an error (noUiSlider is undefined).

I've set up a debug on chrome to try and find out what's happening - when I inspect the import I see an error - ReferenceError: noUiSlider is not defined at eval but when I inspect the actual execution line the debugger does recognize the import.

The execution still fails as the import is not recognized.

So far I've tried to add the babel-loader thinking it might be failing there, but I'm getting the same error.

Any idea what I'm missing?

Answer 1

Just a guess but you might have not installed this npm module?

could you try running:

npm install html-webpack-plugin --save-dev

Answer 2

try adding something similar to 'babel-present-env' dependency to compile ES2015+ down to ES5. Looking at your config could you try changing your ts rule to this:

{
  test: /\.ts(x?)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets:['env']
      }
    },
    {
      loader: 'ts-loader'
    }
  ]
}