Webpack 配置中的 resolve 属性错误 - 解决方案 - 常规

Webpack 配置中的 resolve 属性错误 - 解决方案

在使用 Webpack 时，我们经常会遇到以下代码中的错误：

const { resolve } = require('path');

module.exports = {
    rules: [
        {
            test:/.ts$/,
            loader:"tp-loader",
            exclude: /node_modules/
        }
    ]
}
resolve: {
    extensions: ['.ts', '.js']
}

错误原因：

这段代码中的 resolve 属性位置错误，它应该位于 module.exports 对象内部，而不是外部。

解决方案：

将 resolve 属性移至 module.exports 对象内部，并创建一个名为 resolve 的属性，如下所示：

const { resolve } = require('path');

module.exports = {
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test:/.ts$/,
                loader:"tp-loader",
                exclude: /node_modules/
            }
        ]
    }
};

修正后的代码:

const { resolve } = require('path');

module.exports = {
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test:/.ts$/,
                loader:"tp-loader",
                exclude: /node_modules/
            }
        ]
    }
};

注意：

resolve 属性用于配置 Webpack 在解析模块时使用的路径和扩展名。
module.exports 对象用于导出 Webpack 配置对象。
以上代码示例展示了如何使用 resolve 属性来配置 Webpack 以识别 .ts 和 .js 文件。