ReferenceError：添加@path配置后未定义解析

Question

我想在 vue 3 中将 @ 与导入路径一起使用：

import Options from '@/popup/components/Options.vue'

所以我在 webpack 5.x 中添加了这个配置：

'@': resolve('src'),

这是完整的 webpack 5.x 配置：

const path = require('path');
const webpack = require( 'webpack' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
const HtmlWebpackPlugin = require( 'html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry : {
    'popup/popup' : './src/popup/' 
  } ,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
        // /sf/ask/3556376911/
        vue: 'vue/dist/vue.esm-bundler.js',
        '@': resolve('src'),
    },
  },
  output : {
    path : path.resolve(__dirname, '../../bundle') ,
    filename : '[name].js'
  },
  module : {
    rules : [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        },
        exclude: /node_modules/
      },
      
      {
        test : /\.js$/ ,
        exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
        loader : 'babel-loader'
      } ,
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test : /\.(scss)$/ ,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins : [
    new VueLoaderPlugin(),
    new CopyPlugin({
      patterns: [
        { from: "src/manifest.json", to: "manifest.json" },
        { from: "src/resource/image", to: "resource/image" },
      ],
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
    new HtmlWebpackPlugin({
      filename: 'popup/popup.html',
      template: 'src/popup/index.html'
    }),
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false,
    }),
  ]
};

但编译输出错误如下：

[webpack-cli] Failed to load '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/resource/config/webpack.dev.config.js' config
[webpack-cli] ReferenceError: resolve is not defined
    at Object.<anonymous> (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/resource/config/webpack.base.config.js:17:14)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/resource/config/webpack.dev.config.js:3:10)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

哪里有问题？我应该怎么做才能解决这个问题？

Answer 1

在你的第17行webpack.config.js，你正在引用resolve。它是模块的一部分path。因此，您需要执行以下操作：

'@': path.resolve(__dirname, 'src')