webpack.config.ts

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需要为 any 模块输入内容，除非该模块不是用typescript编写的。

Answer 2

首先，不需要 .ts 扩展名的webpack配置文件。它只是构建捆绑包的内部目的。使用普通的 .js 文件。

Webpack不是由浏览器运行的，而是由Node Js 运行的，该Node Js运行webpack模块并根据配置进行捆绑。

现在require了解自己的模块系统是const webpack = require('webpack'); const path = require('path');

因此如下所示：要求是Node Js模块导入语法。

     <Button
         android:id="@+id/toolbar"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginEnd="8dp"
         android:layout_marginRight="8dp"
         android:text="SEND"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.05"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

     <TextView
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_marginBottom="8dp"
         android:layout_marginEnd="8dp"
         android:layout_marginLeft="8dp"
         android:layout_marginRight="8dp"
         android:layout_marginStart="8dp"
         android:text="Hello World"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/toolbar"
         app:layout_constraintVertical_bias="0.0">
     </TextView>

Answer 3

尝试使用require语法而不是import＆amp;将webpack.config.ts更改为以下代码

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

找不到模块'路径'

3 个答案:

webpack.config.ts