Question

尝试为我的项目使用webpack中的splitChunks选项时出现错误。生成的main.js / index.js文件引发错误，提示： TypeError: modules[moduleId] is undefined 另一个生成的文件vendors.js（包括我的node_modules）由于以下原因而失败： ReferenceError: exports is not defined 看来vendor.js文件没有获得与main.js文件相同的webpack模板脚手架功能，这是我对为什么会发生这种情况的猜测。我使用HtmlWebPackPlugin自动将我所有的脚本引用注入HTML页面，并看到vendor.js也被直接注入。

我已经确认webpack可以在不使用split-chunks选项的情况下工作。仅当使用此选项时，我才会收到错误消息。

这是我的webpack.config.js文件：

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

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

var srcFolder = "./wwwroot/src";
var distFolder = "./wwwroot/dist";
module.exports = {
  mode: 'development', //'production',
  target: 'node',
  entry: [
    '@babel/polyfill',
    'whatwg-fetch',
    srcFolder + '/js/main.ts'
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: false }
          }
        ],
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    path: path.resolve(__dirname, distFolder),
    filename: '[name]_[chunkhash].js',
    publicPath: ""
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
  },
  devtool: "inline-source-map",
  plugins: [
    new HtmlWebPackPlugin({
      title: "Webpack Typescript Setup Template",
      template: srcFolder + "/index.html",
      favicon: srcFolder + "/assets/favicon.ico",
      filename: "./index.html"
    })
  ]
};

Answer 1

我有相同的错误，但可能设置不同。对我来说，这只发生在服务器捆绑包中，因此我可以通过添加babel-loader插件'dynamic-import-node', 'remove-webpack'来解决它。

在webpack中使用splitChunks选项时如何解决模块未定义错误

1 个答案: