学习webpack遇到的一些问题
程序员文章站
2022-03-26 10:35:47
...
本次学习webpack的过程中遇到了种种难题,分别记录
npm安装的功能在cmd命令行不能使用的问题
首先这个问题真的一直困扰我许久,查阅过node安装教程的都知道,在安装的时候需要新建两个文件夹,分别是node_cache以及node_global这两个文件夹,我的问题就是环境变量都配置好的情况下,使用npm安装的各个模块,均不能在命令行使用,查了半天,发现我所有的模块均安装在的是cache文件夹中,而不是global文件夹,最后是使用命令语句:npm config set prefix "node_global在你电脑的路径“
这个语句一定要写在最后,后面不能再写npm config set prefix "node_cache在你电脑的路径“
否则你的后一句就会覆盖前一句,导致最终所有的模块都安装在cache中,就会不能再cmd中使用命令行来执行模块了
npm安装完nrm之后,使用报错问题
安装完之后使用nrm ls
就说有语法错误,这是因为我的node的版本太低了,然后又因为更新这个node版本浪费了好多时间。
首先网上有很多都是使用 n 模块来更新的,如果大家是windows操作系统的用户,这个模块是根本不能使用的,windows用户可以去官网去下载这个较新的node版本,然后直接安装在原来的node文件夹中去覆盖即可。
在项目中使用webpack-dev-server时,安装各个包出现的问题
- 在这个部分首先要使用webpack-dev-server这个模块,就必须本地安装webpack包,虽然已经全局安装过了,在本地还是要再装一遍的
- 我使用的时候是还缺少一个webpack-cil的模块,如果也有这个警告的话就直接按照提示将其安装一下就可以了
- 然后使用webpack-dev-server的时候,发现运行成功但是,在文件夹中打包好的那个文件确不改变,这是因为使用这个模块生成的打包文件是一个我们看不见的虚拟文件,是与项目中的src等文件包平行的一个js文件,而不是使用webpack手动打包的那个文件。所以在index.html中引入的时候,要引入这个虚拟的,在根目录下的打包文件才可以实时看到更新变化。
- 当然,也是可以任然引用的是原来手动打包的那个文件,但是需要你再开一个cmd,来运行
webpack --watch --hot
这样引用原来的那个打包文件的地址也是可以实时更新的,但是这种其实是存在磁盘上的,速度没有那个托管在根目录下的虚拟文件快。
然后使用这个watch的话要配置这个webpack的模式,写在那个config文件中,就是图中的mode属性,有‘develpoment’和’production’两种。
上一篇: es聚合中的一些问题解答