1,安装版本,webpack版本不同对应的插件版本也不同
例如:
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none was installed.
extract text webpack plugin@3.0.2需要webpack@3.1.0的对等方,但未安装任何对等方。
当时我安装的webpack是2.2.1,查看webpack版本
webpack -v
-v这个适用于所有插件版本查询
2,webpack-cli
局部安装还是全局安装
如果是局部安装的webpack和webpack-cli ,想要使用webpack命令必须进入webpack文件下才能执行webpack命令,或者加上npx
如果是全局安装 的webpack,webpack-cli也要全局安装。
webpack3和webpack4的webpack-cli不同,webpack4中的webpack-cli是分开的,官方说为了便于管理(我play)
3.Cannot find module 'xxxxxxxx'
缺少模块,他说你缺啥你就安装啥就行了,注意全局安装和局部安装,还要注意版本号
如果你安装了跑不通,可能是你版本不适配,WARN中会提示根据你的webpack版本去装合适的插件版本
怎么安装指定的webpack版本?
npm install webpack@版本号
4.我装了模块可是显示我没有?package.json里也没有?
可能是全局或者局部安装的问题,建议重装一次;
如果全局的局部的都装了还是显示没有,恭喜你,把package.json删了,重新生成。再把webpack以及那一堆模块重装一遍。
5.我安装了插件但是被弃用了
因为你插件和webpack版本不对等
报错:WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated
有2个解决办法:
1.降低webpack版本
方法1:npm install webpack@版本号 这么做是直接覆盖 做完时候查询下你的webpack版本是否覆盖成功
方法2:先卸载再安装
如果是全局安装npm uninstall webpack -g,如果是局部安装你去你的项目下把模块删了就成,最好是把node-modules一起删了,可能会对结果有影响。
2.提升extract-text-webpack-plugin版本
从3.0.2升到4.0.0:npm install extract-text-webpack-plugin@next,注意局部和全局,自己添加-g或者--save-dev
6.onchange自动打包没有反应
修改完代码并且保存了,但是run watch没反应?
如果你是windows系统用户,需要特别注意的是,在windows环境下,不支持
"watch": "onchange ‘src/**/*.js\‘ ‘src/**/*.less‘ -- npm run webpack"
这种双引号包裹单引号的写法,需要如上代码用反斜杠进行转义,否则会自动打包失败
改成:"watch": "onchange \"src/**/*.js\" \"src/**/*.less\" -- npm run webpack"
7.webpack-dev-server
据说webpack-dev-server 可以替代onchange,我按照官方文档安装了,运行之后报错如下:
(忘截图了)
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration misses the property 'entry'.
object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
The entry point(s) of the compilation.
意思是你版本不匹配,很大的可能性是你的webpack-dev-server装高了,把他换成低版本的就行
一般webpack 3.x.x 配上webpack-dev-server 2.x x比较好。
………………………………………………更新………………………………………………………………
对不起打脸了,这是装postcss-value-parser的时候出来的提示,鉴于此,我把webpack又降低到了 2.2.1