找不到模块“路径”

Question

I'm attempting to learn Typescript and thought I should also make my webpack config in .ts . This is my 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;

As well as my 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"
  }
}

The error I get when running npm run build is:

TS2307: Cannot find module 'path'

I have also tried requiring path, but then I get a different error saying it cant find module require.

What seems to be the issue?

Answer 1

This should help

npm i @types/node -D

Typescript needs typings for any module, except if that module is not written in typescript.

Answer 2

Using

"types": ["node"]

in tsconfig.json as mentioned in the comments, solved the issue for me.

Answer 3

Try using require syntax rather than import & change webpack.config.ts to the following code

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;

And then run npm run build

Answer 4

First of all no need of .ts extension for webpack config file. Its just internal purpose for building the bundle. Use normal .js file.

Webpack is not ran by browser, its by Node Js which runs webpack module and make bundle as per config.

Now Node Js understand its own module system is which is require

So it would be like below: require in below is Node Js module importing syntax.

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