运行npm run watch报错：找不到extract-text-webpack-plugin模块的解决方法

错误含义 #

从错误日志里的核心提示Error: Cannot find module 'extract-text-webpack-plugin'就能明确问题：你的Webpack配置文件（webpack.config.js）里引用了extract-text-webpack-plugin这个插件，但它并没有被安装到项目的依赖中。Webpack在加载配置文件时找不到这个模块，因此直接抛出错误终止了watch命令的执行。

解决方法 #

根据你使用的Webpack版本，分两种情况处理：

情况1：Webpack 3及以下版本

直接将缺失的插件安装到开发依赖中：

npm install extract-text-webpack-plugin --save-dev

安装完成后重新运行npm run watch，就能正常启动文件监听模式了。

情况2：Webpack 4及以上版本

注意！extract-text-webpack-plugin在Webpack 4之后已被官方废弃，不再维护，官方推荐使用mini-css-extract-plugin替代。你需要完成以下步骤：

1. 卸载旧插件（如果之前误装过）：

   npm uninstall extract-text-webpack-plugin --save-dev
   

2. 安装新的替代插件：

   npm install mini-css-extract-plugin --save-dev
   

3. 修改webpack.config.js文件，替换插件的引用和使用逻辑：
   原代码示例：

   const ExtractTextPlugin = require('extract-text-webpack-plugin');
   // ...
   module.exports = {
     // ...
     plugins: [new ExtractTextPlugin('styles.css')]
   };
   

   替换为：

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   // ...
   module.exports = {
     // ...
     plugins: [new MiniCssExtractPlugin({ filename: 'styles.css' })]
   };
   

   同时要修改module.rules中的loader配置，将ExtractTextPlugin.extract替换为MiniCssExtractPlugin.loader，具体可参考插件的基础用法调整。

额外排查步骤 #

如果安装后仍报错，可以尝试：

• 检查webpack.config.js里的插件名称是否有拼写错误（比如大小写、单词拼写）；
• 删除项目根目录下的node_modules文件夹和package-lock.json文件，重新运行npm install，确保所有依赖完整安装；
• 查看package.json的devDependencies字段，确认插件已成功添加。

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