Question

我正在从头开始创建React应用。在某些时候，我使用webpack构建应用程序时遇到了标题中的错误。

Here is a minimal repository to reproduce this error.

问题出在哪里，如何解决此错误？

Answer 1

我之前提交的代码未运行，但这在浏览器中可以运行，并为您打招呼。我已经安装了名为ejs-loader的额外软件包（由于ejs扩展，我想这没有得到文档节点）这是您的Webpack配置更新

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

var config = {
  entry: "./src/index.tsx",

  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.min.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Showcase",
      template: "./src/index.ejs",
      inject: true,
      filename: "./index.html"
    })
  ],

  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        include: [path.resolve(__dirname, "src")],
        exclude: /node_modules/
      },
      { test: /\.ejs$/, loader: "ejs-loader?variable=data" }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        }
      },

      chunks: "async",
      minChunks: 1,
      minSize: 30000,
      name: true
    }
  }
};
module.exports = config;

这是您的tsconfig 已更新

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "outDir": "./dist/",
    "target": "es6",
    "lib": ["es2015", "es2017", "dom"],
    "removeComments": true,
    "allowSyntheticDefaultImports": false,
    "jsx": "react",
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "components/*": ["src/components/*"]
    }
  }
}

只需在根目录中创建一个 dist 文件夹

Webpack：ReferenceError：未定义文档

1 个答案: