现在我们来学习一个最常用的插件 webpack-dev-server，一般来说，这个插件，大家都会用，特别是开发环境下。
我们之前使用 webpack --mode development 来在开发环境下编译静态文件，但是这个功能，完全可以用 webpack-dev-server 来代替,这样我们就可以直接用npm run dev开启
"scripts": {
"dev": "webpack --mode development", =>`webpack-dev-server`
"build": "webpack --mode production"
},
除此之外， webpack-dev-server 还有其他的功能，比如在本地上开启服务，打开浏览器等。
这节我们主要来简单体验一下 webpack-dev-server 的功能。
# 先全局安装
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server
然后运行命令：
$ npm run dev(package.json中配置)
现在我们用浏览器打开 localhost:8080 也可以看到以前的效果。
下面是编译后的源码。
默认是运行在 8080 端口，这个我们可以改。
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src',
...
devServer: {
port: 9000
},
...
};
我们还可以配置一运行 webpack-dev-server 的时候就自动打开浏览器。
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src',
...
devServer: {
port: 9000,
open: true
},
...
};
另外我们还可以开启代理解决跨域问题:
先放个链接有兴趣可以看下：https://webpack.js.org/configuration/dev-server/
