找不到模块“路径”

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');