Question

我简单的webpack配置：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const developmentMode = 'development'
const configFactory = () => {
  let plugins = [
    new webpack.DefinePlugin({
      __DEV__: developmentMode,
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(process.cwd(), 'src/index.html'),
      inject: true,
    }),
  ]

  const config = {
    mode: developmentMode,
    entry: {
      app: path.resolve('./src/app/app.jsx'),
    },
    output: {
      filename: 'outputFileName',
      path: path.resolve('../dist'),
    },
    devtool: true,
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: require.resolve('ts-loader'),
            }
          ]

        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.jsx', '.js'],
      modules: [path.resolve('node_modules'), path.resolve('src/lib')],
    },
    plugins,
  };
  return config
}

module.exports = configFactory;

我的tsconfig

{
    "compilerOptions": {
        "outDir": "",
        "jsx": "react",
        "target": "es5",
        "module": "es2015",
        "lib": [
            "es2015",
            "dom",
            "scripthost",
            "dom.iterable"
        ],
        "moduleResolution": "node",
        "sourceMap": true,
        "strict": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "declaration": true,
        "allowJs": false,
        "baseUrl": "./src",
        // "paths": {
        //   "*": ["lib/*"]
        // }
    },
    "exclude": [
        "node_modules"
    ]
}

我在webpack中使用了resolve.modules。 webpack中的配置如下：

resolve: {
  extensions: ['.ts', '.tsx', '.jsx', '.js'],
  modules: [path.resolve('node_modules'), path.resolve('src/lib')],
},

src / lib / helios.ts 如下：

export default function() {
  return 'helios-lib'
}

我将此lib / helios与其他文件一起使用，如下所示：

import helios from 'helios';

这在运行时可以，但是VSCODE提示 [ts]找不到模块'helios'。 [2307] 。

当前解决方案是在tsconfig中配置路径，如下所示：

"paths": {
  "*": ["lib/*"]
}

但是这样做有些技巧，不利于以后的可伸缩性。

有什么好的解决方法吗？请

webpack版本：4.19.1
webpack-cli版本：3.1.1
打字稿版本：2.9.x

Webpack resolve.modules在带打字稿的vscode中不起作用？

0 个答案: