webpack 无法导入 npm 包

Question

我有一个非常简单的 webpack 配置

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"
};

我正在导入一个 npm 包（nouislider），构建工作正常，但是当我运行应用程序时出现错误（noUiSlider 未定义）。

我已经在 chrome 上设置了一个调试，试图找出发生了什么 - 当我检查导入时，我看到一个错误 - ReferenceError: noUiSlider is not defined at eval 但是当我检查实际执行行时，调试器确实识别出导入。

由于无法识别导入，执行仍然失败。

到目前为止，我已经尝试添加 babel-loader，认为它可能会在那里失败，但我遇到了同样的错误。

知道我错过了什么吗？

Answer 1

只是猜测，但您可能还没有安装这个 npm 模块？

你可以试试跑步吗：

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

Answer 2

尝试添加类似于 'babel-present-env' 的依赖项来将 ES2015+ 编译为 ES5。查看您的配置，您可以尝试将您的 ts 规则更改为：

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