webpack dev server（如何搭建webpack-dev-server）

本文目录

• 如何搭建webpack-dev-server
• webpack运行报错 webpack-dev-server. 解决方法
• 运行vue项目报错webpack-dev-server: Permission denied
• webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
• 请问webpack-dev-server报错是什么原因
• webpack devServer代理跨域get请求成功，post请求失败403 Forbidden
• webpack-dev-server host坑爹配置
• webpack-dev-server怎么配置，实现实时自动刷新
• webpack-dev-server怎么验证是否安装
• webpack在用dev-server的时候怎么配置多入口文件

如何搭建webpack-dev-server

1、webpack-hot-middleware（版本2.0以上），配置方法在插件的readme.md有写。 2、webpack-dev-server和webpack-hot-middleware，配置方法在插件的readme.md有写。

webpack运行报错 webpack-dev-server. 解决方法

 Webpack与webpack-dev-server版本不兼容而导致编译出错。

 通过以下命令卸载并重新安装：
   卸载版本:

   安装指定版本

运行vue项目报错webpack-dev-server: Permission denied

直接上重点！！
webpack-dev-server:Permission denied：没有权限

原因分析 ： 原本安装vue-cli呢，是会自带安装webpack的，但我是从vue3.0切换到vue2.x 版本，中间有一个强制切换到过程必然会带来一些残留，这个问题的出现可能就是强制切换带来的bug，那么我们直接给它来个 给权全局安装 咯！

执行 下面2个命令，就OK了

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

这该死的bug折腾了我一天，终于解决了，现在记录一下解决办法：
首先声明一点，这种Bug一般都出现在你使用的是现有的工程，新建的工程不可能出现这个问题，如果出现，太简单了，把node_moudles删除，重新npm install即可。
当现有的工程出现这个bug的时候，问题就没有那么简单，按照下面步骤检查：
1.最重要的就是你要弄清楚这个项目之前安装依赖是用的什么命令，是否使用了镜像，npm/cnpm不能混着使用，否则会出现问题。如果之前使用的是cnpm，那安装依赖就一直使用cnpm。
2.弄清楚安装依赖的命令以后，把node_moudles删除，重新npm/cnpm install即可。
3.如果还报错的话，你要检查webpack 与 webpack-dev-server 的版本是否对应，这两个东西的版本必须是对应的才可以。下面教你如何看两个东西对应的版本：
***隐藏网址***
点开网址以后，选择Versions,就能看到 Current Tags , 如图
安装完以后，重新npm run dev，就可以跑通了。

请问webpack-dev-server报错是什么原因

你是用了webpack4吧
现在使用webpack要同时安装webpack-cli这个包，才可以调用webpack和webpack-dev-server这些命令
npm install webpack webpack-dev-server webpack-cli --save-dev
接下来就可以直接
webpack-dev-server

webpack devServer代理跨域get请求成功，post请求失败403 Forbidden

一般情况，这样配置代理跨域即可

但是在后台将允许的跨域地址指定为一个后，上述配置便对post请求不生效了，也就是post请求跨域失败，而get请求成功。
对比get和post请求的不同，发现get的请求头里面没有origin字段，而post请求里面有origin字段。

解决：在webpack的devServer配置

webpack-dev-server host坑爹配置

今天下午在调试一个vue-cli生成的项目时候发现局域网内的其他设备访问不到项目主机,一开始还以为是代理或者防火墙之类的问题,检查了代理和防火墙之后确认都是关着的,于是确认问题肯定是webpack-dev-server了.

google之,发现网上已经给出了答案:将config/index.js中dev项下的host配置为:0.0.0.0. 按照这样配置之后,发现问题来了,运行npm run dev之后浏览器自动打开的host地址也变成0.0.0.0了,并且打不开,只能用localhost打开.

寻思了一下之前的项目没有遇到这个问题的呀,仔细查了一下,发现vue-cli在1.2的版本前用的是express作为server,其后改为了webpack-dev-server,所以之前的没有这个feature(bug).

作为强迫症的我当然不甘心,心想一定有某种方法可以配置好的,继续折腾,发现确实有个配置项目可关闭ip检测,叫做disableHostCheck: true的,但是这个配置项不能在cli中使用(尼玛,写到这里的时候,去查了disableHostCheck选项,发现在cli中有对应的配置项:webpack-dev-server --disable-host-check, 满怀惊喜的试了一下,依然不行,基本可以确定这个配置项只能是4.0+才可以用的了....)

最后,还是只能改host配置项为0.0.0.0,然后手动在浏览器里面输入地址了,真想fuck webpack坑爹的配置...

webpack-dev-server怎么配置，实现实时自动刷新

1、webpack-hot-middleware（版本2.0以上），配置方法在插件的readme.md有写。 2、webpack-dev-server和webpack-hot-middleware，配置方法在插件的readme.md有写。

webpack-dev-server怎么验证是否安装

配置webpack-dev-server：

a. webpack-dev-server简介：

• 是一个小型node.js express服务器

• 新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器

• 启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。

• 两种自动刷新方式：

iframe mode
在网页中嵌入了一个 iframe ，将我们自己的应用注入到这个 iframe 当中去，因此每     次你修改的文件后，都是这个 iframe 进行了 reload
命令行：webpack-dev-server，无需--inline
***隐藏网址***

inline mode
命令行：webpack-dev-server --inline
***隐藏网址***

b. 安装webpack-dev-server
npm install webpack-dev-server --save-dev

可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）

c. 在webpack.config.js中添加配置

var webpack=require(’webpack’);
module.exports = {
……
devServer: {
historyApiFallback: true,
inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},
plugins:[
……
new webpack.HotModuleReplacementPlugin()
]
……
};

d. 在package.json里配置运行的命令（npm支持自定义一些命令）

"scripts":
{
"start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新
},

e. 运行server

• npm start

Error: .........（此处省略一堆错误）

解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件     夹，内含webpack及其依赖包）
npm install webpack

• ***隐藏网址***
  成功运行，且修改app中的js代码，浏览器会自动刷新！成功！

webpack在用dev-server的时候怎么配置多入口文件

类似下面这样就可以了，entry设置为对象 每个入口设置为属性，属性的值是一个数组，就可以像单入口一样往这个数组添加
entry: {
Profile: [
’webpack-dev-server/client?’,
’webpack/hot/only-dev-server’,
’./profile.js’],
Feed: [
’webpack-dev-server/client?’,
’webpack/hot/only-dev-server’,
’./feed.js’]
}