2

我一直在尝试使用 Webpack、webpack-merge 和使用 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;

然后我有单独的使用 webpack-merge 的 prod 和 dev 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_modules/@types/webpack/index").Configuration' 类型的参数不能分配给 'import(".../node_modules/@types/webpack-merge/node_modules/ 类型的参数@types/webpack/index").Configuration'。

基于此，看起来 webpack-merge 有自己的 Webpack 类型，而 Webpack 和 webpack-merge 使用的是两种不同的Configuration类型。

我尝试更新 webpack-merge 类型，以便它导入 Webpack 的类型而不是它自己的集合。

在 webpack-merge 的index.d.ts文件中：

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

这样做，我现在从webpack.dev.tsmerge的方法内部得到一个不同的错误：

'{ devServer: { compress: boolean; 类型的参数 内容基础：字符串；historyApiFallback：布尔值；热：布尔值；打开：布尔值；端口：号码；}; 开发工具：“源地图”；外部：{“反应”：字符串；'react-dom'：字符串；}; 模式：“发展”；}' 不可分配给“配置”类型的参数。

将鼠标悬停merge在 VS Code 中，这是我得到的类型信息：

（别名）合并（...configs：配置[]）：配置

我应该更新 webpack-merge 的导入路径，以便它使用相同的类型声明吗？以及如何更新merge类型以接受这些 webpack-dev-server 类型（无需使用any）？

4

1 回答 1

3

扩展 webpack 的 TypeScript 类型以按照uipoet （并在此处转录）在这个definitelyTypes 问题响应中的建议Configuration进行定义，这对我有用。devServer

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/webpack5.28.0 和@types/webpack-dev-server3.11.4 测试。

参考：

于 2021-06-03T09:30:09.113 回答