关于webpack的使用及报错处理小记

今天使用webpack遇到几个报错，现整理记录如下

问题一：

运行npm run dev时，报错Cannot find module 'webpack-cli/bin/config-yargs'

问题原因定位：webpack的版本和webpack-dev-server的版本不兼容

问题解决方案：先卸载这两个插件，再安装指定的版本

代码：

• npm uninstall webpack-dev-server -D
• npm install webpack-dev-server@2.9.7 -D
• npm uninstall webpack -D
• npm install webpack@3.4.1 -D
• 再运行npm run dev，浏览器打开并运行

 

问题二：

运行npm run dev时，报错Cannot read property 'make' of undefined

问题原因定位：各插件之间版本不兼容

问题解决方案：经过卸载html-webpack-plugin，然后重新安装制定版本解决

代码：

• npm uninstall html-webpack-plugin -D
• npm install html-webpack-plugin@3.2.0 -D
• 再运行npm run dev，浏览器打开并运行

问题三：

运用clean-webpack-plugin删除dist目录时，报错cleanWebpackPlugin is not a constructor

问题原因定位：视频教程给出的clean-webpack-plugin插件使用方法是：1，安装插件   npm i clean-webpack-plugin --D;   2, 导入插件   const cleanWebpackPlugin = require('clean-webpack-plugin');  3，初始化插件实例  new cleanWebpackPlugin(['dist'])

问题解决方案：该插件已经更新，使用方法也已经改变（导入插件与初始化插件实例的方法变了）

代码：

• npm i clean-webpack-plugin --D
• const {CleanWebpackPlugin} = require('clean-webpack-plugin')
• new CleanWebpackPlugin()

 

问题四：

安装optimize-css-assets-webpack-plugin后运行npm run pub，报错

optimize-css-assets-webpack-plugin

问题原因定位：optimize-css-assets-webpack-plugin版本过高

问题解决方案：删除optimize-css-assets-webpack-plugin再重新下载

代码：

• npm uninstall optimize-css-assets-webpack-plugin --D
• npm install optimize-css-assets-webpack-plugin@3 --D

 

问题五：nodejs安装后，使用npm安装模块的时候，报错Error: EPERM: operation not permitted

将npmrc文件内容修改为如下内容：

prefix=D:\Program Files\nodejs\node_global  （配置使用-g进行全局安装的文件的安装路径，如npm i npm -g）
cache=D:\Program Files\nodejs\node_cache
registry=https://registry.npm.taobao.org

***EPERM：没有相应权限*****