Webpack配置报错：ReferenceError: resolve is not defined（ExtractTextPlugin.extract）

嘿，我看你遇到的这个报错是在Webpack配置里用ExtractTextPlugin.extract()的时候找不到resolve对吧？虽然你搜过类似的SO帖子但没匹配上，那咱们来针对性解决下~

首先，这个错误的核心原因很明确：你的Webpack配置文件里没有定义resolve这个变量或者方法，但你在第51行的ExtractTextPlugin.extract()配置里用到它了。

常见的两种场景和对应解决办法：

• 场景1：你想用Webpack内置的路径解析方法
  这种情况下，你需要先在配置文件顶部引入Webpack核心模块，把resolve解构出来，或者直接通过webpack.resolve调用：

  // 顶部引入webpack模块
  const webpack = require('webpack');
  // 或者直接解构出resolve方法
  const { resolve } = require('webpack');
  

  之后在ExtractTextPlugin.extract()里就能正常使用resolve了，比如：

  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: 'css-loader',
    publicPath: resolve(__dirname, 'dist') // 这里调用resolve就不会报错
  })
  

• 场景2：你想自定义路径解析函数但未定义
  如果你是打算自己写一个resolve函数来处理相对路径，那得先在配置文件里定义它，记得先引入path模块：

  // 先引入path模块
  const path = require('path');
  // 自定义resolve方法，拼接项目绝对路径
  const resolve = (dir) => {
    return path.join(__dirname, dir);
  }
  

  定义完成后再在ExtractTextPlugin的配置中使用resolve就没问题了。

另外，还有一种小概率情况：你可能把path.resolve误写成了resolve，这种时候直接改成path.resolve，确保顶部已经引入path模块即可。

你可以先检查下webpack.base.config.js第51行附近的代码，看看属于哪种情况，调整后重新执行npm run build应该就能解决啦！

内容的提问来源于stack exchange，提问作者user7693832