找不到模塊“路徑”

Question

我正在嘗試學習 Typescript，並認為我也應該在.ts中進行 webpack 配置。 這是我的webpack.config.ts ：

import * as webpack from 'webpack';
import * as path from 'path';

const config: webpack.Configuration = {
    entry: path.resolve('src/main.ts'),

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },

    output: {
        filename: 'index.js',
        path: path.resolve( 'dist')
    }
}

export default config;

以及我的package.json ：

  "main": "index.js",
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "webpack --config devtools/webpack.config.ts --display-error-details",
    "post-build": "webpack-dev-server --config devtools/webpack.config.ts --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^4.0.1",
    "ts-node": "^5.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  }
}

運行 npm run build 時出現的錯誤是：

TS2307: Cannot find module 'path'

我也嘗試過要求路徑，但后來我得到一個不同的錯誤，說它找不到模塊要求。

似乎是什么問題？

Answer 1

這應該有幫助

npm i @types/node -D

Typescript 需要為任何模塊輸入類型，除非該模塊不是用 typescript 編寫的。

Answer 2

使用

"types": ["node"]

在評論中提到的tsconfig.json中，為我解決了這個問題。

Answer 3

嘗試使用require語法，而不是將webpack.config.ts import和更改為以下代碼

webpack.config.ts

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

const config: webpack.Configuration = {
    entry: path.resolve('src/main.ts'),

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },

    output: {
        filename: 'index.js',
        path: path.resolve( 'dist')
    }
}

module.exports = config;

然后運行npm run build

Answer 4

首先，webpack 配置文件不需要.ts擴展名。 它只是構建捆綁包的內部目的。 使用普通的.js文件。

Webpack 不是由瀏覽器運行的，它由運行 webpack 模塊並根據配置生成包的Node Js運行。

現在Node Js明白了它自己的模塊系統是require

所以它會像下面這樣：下面的require是 Node Js 模塊導入語法。

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