webpack打包常见问题(webpack-dev-server)

第一个问题  就是之前我写的那个 如果你文件放的位置不对 也会出现没有效果的  当然这个错误比较低级!

webpack 操作正确一直打包不上_VVVVV16的博客-CSDN博客

另外几种就是  出现在webpack-dev-server这个自动刷新的工具

第一个就是:npm ERR! Missing script: dev npm ERR! npm ERR! To see a list of scripts, run: npm ERR!   npm run

这个问题出现  我建议别急  尝试 卸载掉之前你安装的  确保之前 的webpack还能够打包运行

然后重新按照npm官网的这个包的操作来一遍

webpack打包常见问题(webpack-dev-server)_第1张图片

webpack打包常见问题(webpack-dev-server)_第2张图片

 webpack打包常见问题(webpack-dev-server)_第3张图片

就这样   我这个 open   可加可不加

基本上再运行npm run dev  就行   如果还不行  出现

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

 

也就是这   建议  运行  这个代码

npm install webpack-cli --save-dev

之后 再运行npm run dev   然后就可以了

webpack打包常见问题(webpack-dev-server)_第4张图片

就能跑起来了   但是  你会发现  打开http://localhost:8080/之后是这种的 

webpack打包常见问题(webpack-dev-server)_第5张图片

这样的话  

原因 是因为 你没有在

这个文件中配置

webpack打包常见问题(webpack-dev-server)_第6张图片

这个横线处 也可以改成html的相对路径  但是建议  就我这个

然后 保存  ctrl+c  关闭 之前的东西

再次 npm run dev 跑起来

打开http://localhost:8080/ 之后 你就会看到一个js文件   是你指定的命名的

然后 点一下 你那个文件

webpack打包常见问题(webpack-dev-server)_第7张图片

出现这样的   把这个地址复制

放在这里

然后  你就能得到自动刷新的页面了

也没有问题了  

主要 这个webpack-dev-serve  只是用来调式的  这个东西 开发的时候用着看效果方便  他不会真正的像webpack一样打包出来  

如果遇到这样的问题 可以参考解决   !!!

 

 

 

 

 

 

你可能感兴趣的:(javascript,前端,webpack)