webpack 供应商文件在依赖项上失败答案

【问题标题】：webpack vendor files failing on dependencieswebpack 供应商文件在依赖项上失败
【发布时间】：2022-02-15 06:35:50
【问题描述】：

我正在尝试转换现有的动态网页，其中从表格到高图表的所有内容都通过 js/html 代码插入，由 webpack 创建。 js、css、图片都已成功修改，正在通过ajax读取输入文件以填充网页。问题是供应商 js 文件。我不断在控制台中收到有关某些 js 文件函数的错误消息，这些函数未定义或未在 404 消息中找到。我已经阅读了文档并查看了供应商的现有帖子，所以它看起来不错，但它只是不起作用。

这是我最初在 html 文件中的内容：

    <script type="text/javascript" src="js/jquery.min.1.8.2.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script type="text/javascript" src="js/react.js"></script>
    <script type="text/javascript" src="js/papaparse.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/modules/heatmap.js"></script>
    <script type="text/javascript" src="js/modules/treemap.js"></script>

为了将其导入 webpack，我执行了以下操作：

index.htm（移除了 js 文件的脚本类型，因为 webpack 会为我包含它们）。

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="<%= htmlWebpackPlugin.options.metaDesc %>"> 
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

index.js（这是 webpack 的主文件）。模块用于 highchart 并由 highchart.js 加载。

import {readInSoftwareVersions} from "./softwareList"
import "./styles.css"
import "./vendor/js/jquery.min.1.8.2.js"
import "./vendor/js/underscore-min.js"
import "./vendor/js/react.js"
import "./vendor/js/highcharts.js"
import "./vendor/js/highcharts-more.js"
import "./vendor/js/papaparse.js"
import "./vendor/js/modules/broken-axis.js"
import "./vendor/js/modules/broken-axis.src.js"
import "./vendor/js/modules/canvas-tools.js"
import "./vendor/js/modules/canvas-tools.src.js"
import "./vendor/js/modules/data.js"
import "./vendor/js/modules/data.src.js"
import "./vendor/js/modules/drilldown.js"
import "./vendor/js/modules/drilldown.src.js"
import "./vendor/js/modules/exporting.js"
import "./vendor/js/modules/exporting.src.js"
import "./vendor/js/modules/funnel.js"
import "./vendor/js/modules/funnel.src.js"
import "./vendor/js/modules/heatmap.js"
import "./vendor/js/modules/heatmap.src.js"
import "./vendor/js/modules/no-data-to-display.js"
import "./vendor/js/modules/no-data-to-display.src.js"
import "./vendor/js/modules/solid-gauge.js"
import "./vendor/js/modules/solid-gauge.src.js"
import "./vendor/js/modules/treemap.js"
import './images/lessErrors.png'
import './images/moreErrors.png'
import './images/noChange.png'
/*
Read in software list and then build web page.
*/
$(document).ready(function(){
        readInSoftwareVersions(false);  // wait for json to be read in
});

webpack.config.js - 我列出了所有的 js 文件。

module.exports = {
  mode: 'development',
  entry: {
    main: "./src/index.js",
    vendor: [
        "./src/vendor/js/jquery.min.1.8.2.js",
        "./src/vendor/js/underscore-min.js",
        "./src/vendor/js/react.js",
        "./src/vendor/js/highcharts.js",
        "./src/vendor/js/highcharts-more.js",
        "./src/vendor/js/papaparse.js",
        "./src/vendor/js/modules/broken-axis.js",
        "./src/vendor/js/modules/broken-axis.src.js",
        "./src/vendor/js/modules/canvas-tools.js",
        "./src/vendor/js/modules/canvas-tools.src.js",
        "./src/vendor/js/modules/data.js",
        "./src/vendor/js/modules/data.src.js",
        "./src/vendor/js/modules/drilldown.js",
        "./src/vendor/js/modules/drilldown.src.js",
        "./src/vendor/js/modules/exporting.js",
        "./src/vendor/js/modules/exporting.src.js",
        "./src/vendor/js/modules/funnel.js",
        "./src/vendor/js/modules/funnel.src.js",
        "./src/vendor/js/modules/heatmap.js",
        "./src/vendor/js/modules/heatmap.src.js",
        "./src/vendor/js/modules/no-data-to-display.js",
        "./src/vendor/js/modules/no-data-to-display.src.js",
        "./src/vendor/js/modules/solid-gauge.js",
        "./src/vendor/js/modules/solid-gauge.src.js",
        "./src/vendor/js/modules/treemap.js",
        "./src/vendor/js/modules/treemap.src.js"
    ]
  },
  output: {
    filename: "main-[contenthash].js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      title: 'Unit Test Results',
      metaDesc: 'Display all the test results run on the select software version',
      template: './src/index.htm',
      filename: 'index.htm',
      inject: 'body'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",   // 2. Inject styles into DOM
          "css-loader",     // 1. Turns css into commonjs
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "./images/[name].[ext]",
          }
        }
      },
    ]
  }  
};

此设置的 npm compile 没有错误。现在我认为 webpack 会处理依赖项，但我看到 modules/canvas-tools.js 说 highcharts AddEvent 未定义， papaparse.js 未找到，以及其他有关丢失或未声明的错误。基本上 js 依赖关系搞砸了。移动导入顺序修复了一个错误，但随后发生了一些其他依赖错误，因为模块中的 js 文件相互调用。

那我做错了什么？我需要一些供应商插件吗？目前我转储了供应商逻辑并将脚本类型行插入回 index.htm 以便它运行，但重点是使用 webpack 将 js 文件捆绑在一起。

【问题讨论】：

标签： javascript webpack vendor

【解决方案1】：

您应该创建一个所谓的cacheGroup，而不是从入口点手动创建供应商捆绑包，并为其定义一个测试。以下是文档中的一些示例代码，根据您的情况进行了调整：

module.exports = {
  ...
  entry: {
    main: "./src/index.js"
  },
  output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
  },
  optimization: {
      splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]vendor[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },
    },
  ...
  };

这会将来自vendor 目录的所有导入添加到名为vendors 的块中。你可以看到完整的例子here。

【讨论】：

我对 module.exports 进行了更改，从 index 中删除脚本类型以让 webpack 处理 js 文件，从 index.js 中删除 js 导入，并恢复 vendor 目录。错误是找不到 jquery。然后我恢复了 index.js 中所有 js 文件的导入并再次运行。它再次失败并出现此错误：
canvas-tools.js:130 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval (canvas-tools.js:130:135) at eval (canvas-tools.js :133:421) 在 Object../src/vendor/js/modules/canvas-tools.js (main-14dd8175e56f518e4ad4.js?f46f24eb905b797eb762:67:1) 在 webpack_require (main-377cee45cb0a26f17386. js?f46f24eb905b797eb762:213:42) at eval (index.js:23:93) at Module../src/index.js (main-377cee45cb0a26f17386.js?f46f24eb905b797eb762:19:1) at webpack_require (main-377cee45cb0a26f17386.js?f46f24eb905b797eb762:213:42)
135 偏移量是 {p.prototype} 我不知道原型指的是什么，但我认为某些东西没有按正确的顺序导入。
@JohnK 你肯定需要导入你想用于 webpack 的模块来获取它们。您可以尝试将相关导入移至底部并继续这种方式，直到找到有效的配置。