Question

运行Webpack npm run build时，Visual Studio代码出现以下错误：我无法发现我的错误，并且对webpack还是陌生的。任何帮助将不胜感激。

ERROR in ./src/ts/createBoard.ts 10:16
Module parse failed: Unexpected token (10:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to 
process this file. See https://webpack.js.org/concepts#loaders

ERROR in ./src/ts/constants.ts 1:18
Module parse failed: Unexpected token (1:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export const board: Element | null = document.querySelector(".board");
| export const boardRows = 8;
| export const boardCols = 8;
 @ ./src/ts/index.ts 2:0-41 7:2-21 8:2-21 9:2-17

我认为这是webpack.config.ts中的配置问题这是我的代码和webpack配置：

index.ts：

import "../scss/main.scss";
import * as CONSTANTS from "./constants";
import { createBoard } from "./createBoard";
import * as CONTAINER from "./container";

const chessBoard = createBoard(
  CONSTANTS.boardRows,
  CONSTANTS.boardCols,
  CONSTANTS.board
);

CONTAINER.labels();

createBoard.ts：

import * as CONSTANTS from "./constants";
import * as UTILS from "./utils";
import Tile from "./Tile";

const boardArray = UTILS.create2DArray(
  CONSTANTS.boardRows,
  CONSTANTS.boardCols
);

let mousePressed: number = 0;
let initialPosition: Element;
let finalPosition: Element;
let piece: string;

export function createBoard(rows: number, cols: number, board: Element | null) {
  for (let i = 0; i < rows; i++) {
    let row = document.createElement("div");
    row.classList.add("row");
    for (let j = 0; j < cols; j++) {
      let col = document.createElement("div");
      col.classList.add("col");
      col.setAttribute("data-row", `${i}`);
      col.setAttribute("data-col", `${j}`);
      col.setAttribute("data-position", `${i}${j}`);
      boardArray[i][j] = new Tile(i, j, col);

      col.addEventListener("click", function () {
        mousePressed++;
        if (mousePressed == 2) {
          mousePressed = 0;
        }

        let currentTile: Tile;



      row.appendChild(col);

      if ((i + j) % 2 == 0) {
        col.classList.add("light");
      } else {
        col.classList.add("dark");
      }
}
board?.append(row);
 }
}

constants.ts

export const board: Element | null = document.querySelector(".board");
export const boardRows = 8;
export const boardCols = 8;

webpack.config.js：

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

module.exports = {
  mode: "production",
  devtool: "eval-source-map",
  entry: "./src/ts/index.ts",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        include: [__dirname + "./src"],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader",
        options: {
          publicPath: "./webfonts",
          name: "./webfonts[name].[ext]",
        },
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  output: {
    path: __dirname + "/build",
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

我在做什么错？我将不胜感激任何帮助。预先感谢。

您可以在https://github.com/carlos-dubon/webpack-boilerplate克隆我的wepack样板（对于这个特定项目，我添加了一个webfont加载器）

模块解析失败：意外的令牌Webpack？

0 个答案: