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

Question

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

Answer 1

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

Answer 2

看样子你在使用ES2015语法写react，那你的loader配置不怎么正确，应该是：

{ test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'},
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?presets[]=react&presets[]=es2015' }

注意需要安装：npm install --save-dev babel-preset-react babel-preset-es2015

Answer 3

第一：webpack只是构建

webpack-dev-server除了构建，还提供web服务

第二：webpack.config.json的路径参数

显然，entry都一样，因为都要知道需要构建的文件在哪里

那么区别就在于 output了

path和webpack一起，指明构建 之后 输出文件的位置，这是真实的物理地址

publickPath和webpack-dev-server一起，当执行webpack-dev-server时，第一步首先跟webpack一样，先构建输出，然后提供web访问，该输出文件是在内存中

默认情况下，不设置publicPath则输出文件默认在运行webpack-dev-server的目录，也就是根目录，，那么html中引用直接是src="输出的文件"，，如果设置了publicPath那么html中引用也要相对改变

总的来说，webpack只是构建，而webpack-dev-server相当于webpack+apache（或者其它web服务器）

区别在于

使用webpack+apache（或者其它服务器），每次构建之后

1 根据path引用构建后的输出文件；

2 每次修改都要重新运行webpack

使用webpack-dev-server，运行之后

1 先构建，输出文件在内存中，引用构建后的输出文件根据publicPath（默认是根目录）；

2 每次修改，自动刷新

Answer 4

配置webpack-dev-server 运行时报错配置 Can't resolve 'webpack/hot/dev-server'
代码：
webpack.config.js
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');