Typescript 类型的TS2345参数不可分配给类型的参数：使用一个'；在另一个模块中声明

我一直在尝试使用Webpack、Webpack合并和使用TypeScript分离开发Webpack文件来解决一个问题，我已经意识到我需要声明一个类型别名函数，该函数从Webpack.common.ts文件传递到Webpack.dev.ts文件

这是我最初想做的。我有一个webpack.common.ts文件，以基本配置加载：

import { Configuration } from 'webpack';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const common: Configuration = {
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.ts(x?)$/,
        use: [{ loader: 'ts-loader' }],
      },
      {
        enforce: 'pre',
        loader: 'source-map-loader',
        test: /\.js$/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    plugins: [new TsconfigPathsPlugin({})],
  },
};

export default common;

然后我有单独的prod和dev Webpack文件，它们使用Webpack合并。这是webpack.dev.ts：

import { Configuration } from 'webpack';
import common from './webpack.common';
import path from 'path';

const __dirname = path.resolve();

const dev: Configuration = merge(common, {
  devServer: {
    compress: true,
    contentBase: path.join(__dirname, 'dist/dev'),
    historyApiFallback: true,
    hot: true,
    open: true,
    port: 9000,
  },
  devtool: 'source-map',
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
  },
  mode: 'development',
});

export default dev;

这将导致

merge

方法内部出错：

“import”（“…/node\u modules/@types/webpack/index”）.Configuration”类型的参数不能分配给“import”（“…/node\u modules/@types/webpack/index”）.Configuration”类型的参数

基于此，看起来webpack merge有其自己的webpack类型，webpack和webpack merge使用两种不同的

配置

类型

我尝试更新网页包合并打字，以便它可以导入网页包的打字，而不是它自己的集

在网页包合并的索引.d.ts文件中：

// import { Configuration } from 'webpack'; 
import { Configuration } from '../webpack';

这样，我现在从webpack.dev.ts中的

merge

方法中得到一个不同的错误：

import { Configuration } from 'webpack';
import common from './webpack.common';
import path from 'path';

const __dirname = path.resolve();

const dev: Configuration = merge(common, {
  devServer: {
    compress: true,
    contentBase: path.join(__dirname, 'dist/dev'),
    historyApiFallback: true,
    hot: true,
    open: true,
    port: 9000,
  },
  devtool: 'source-map',
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
  },
  mode: 'development',
});

export default dev;

类型为“{devServer:{compress:boolean；contentBase:string；historyApiFallback:boolean；hot:boolean；open:boolean；port:number；}；devtool:“源映射”；外部：{'react'：string；'react dom'：string；}；mode:“development”}不可分配给类型为“Configuration”的参数

将鼠标悬停在VS code中的

merge

上，这是我为其获取的类型信息：

（别名）合并（…配置：配置[]）：配置

---

我是否应该更新网页包合并的导入路径，以便它使用相同的类型声明？我如何更新

合并

类型以接受这些网页开发服务器类型（无需使用

任何

）

import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

export const configuration: Configuration = {
  ...
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000
    ...
  }
  ...
}

使用

@types/webpack

5.28.0和

@types/webpack dev server

3.11.4进行测试

参考资料：

---

问题解决了吗？